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STORM 


FASTER EVERYTHING 


Introducing STORM, a hosting 
platform that helps your agency 


and websites run smoother. 82% 
of our customers have seen a 
25% improvement in site speeds. 


We are offering you a 30 DAY FREE 
TRIAL of our control panel, STORM’. 


Call, email or visit us at 


0203 308 2889 G» NimbusHosting 


sales@nimbushosting.co.uk 
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Welcome 
to the Issue 


Animate, animate, rewind 


nimation has become a first-class 
citizen of the web. It is not some 
novelty looking for support from 
browsers and creators. It can be found 
in every corner of the web and is 
lighting up the user experience. 


Web animations come in many forms. 


There are extravagant full-page designs 
that offer the wow factor, and there are functional 
Ul animations that ensure the user is getting a 
little extra to improve their experience. 

In our latest lead feature we have employed a 
trio of talent that have been working in the world 
of animation for as long as we can remember. 
Chris Gannon is an award-winning freelance 


interact 


excellent advice on how to 
Keeping him company we 
who shows how to get star 
library GreenSock. And finis 
designer Dan Heywood wh 
examples and the best sou 
Elsewhere, we move on 


of PWA 


ive designer, illustra 


or and animator who offers 


have regular Richard Mattka 
ed with the HTML animation 
hing up we have Supremo 

0 offers some inspirational 
ces to follow on Twitter. 


O mobile and provide a host 


ips to power up yo 


ur mobile (and desktop) apps 


to ensure that users get the best experience possible. 
On the development side we take a closer look at 


Express. 


js, the fast, unopinionated, minimalist web 


framework for Nodejs. And on page 56 you can find out 
why variable fonts are such big news. 
As always, enjoy the issue and see you soon. 


Follow us on Twitter for all the news & conversation 
Visit our blog for opinion, freebies & more 
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Highlight 


approach the art of animation. 


Studio Republic improve the lives and 
environment of the people their work impacts 
upon. Web Designer finds out more. Page 34 


Video Tuition - 60 minutes of the Complete Freelancer Course video guides 
from Killersites (shop.killervideostore.com) 


Assets 


- 40 Travel and portrait PS filters and17 Animated banner 
ads from Sparklestock (sparklestock.com) 


- Tutorial files and assets 


FileSilo www filesilo.co.uk/webdesigner 


Meta 


Contributors 
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This issue’s panel of experts 
Welcome to that bit of the mag where we learn more 
about the featured writers and contributors... 


Maximiliano Firtman 


Max is the author of High 
Performance Mobile Web, a 
conference speaker and 
trainer with a focus on 
mobile apps, PWAs and web 
performance. This issue he 
reveals his essential tips to 
get the best from your 
mobile designs. Page 66 


Frank is a frontend 
developer and tech writer 
based in Nairobi, Kenya. In 
this tutorial, he will teach 
you the basics of the Pts 
JavaScript library and 
show you how to create a 
captivating landing page 
with the library. Page 86 


Tam Hanna 


Tam describes himself as an 
old process computer head 
who quickly found a taste 

. } for Nodejs. In this issue he 
wv reveals how Nodejs 10 
introduce nifty tweaks 
intended to appeal to all 
technical audiences. 

= Page 80 


: Frank Kagumba 


Mark is a professor of 
Interaction Design. In this 
issue Mark is looking at 
variable fonts in CSS and 
how they allow for one 
font to be manipulated to 
create different styles, and 
eliminate slow page load 
times. Page 56 


Neil Pearce 
Neil is a long-time frontend 
developer and designer who 
works with HTML, CSS and 
JavaScript. In this issue he 
demonstrates how to 
develop an animated 
UI element, ideal for 
eCommerce, with help 
from CSS and JS. Page 60 


Leon Brown 


Leon is a freelance web 
developer and trainer who 
assists web developers in 
creating efficient code for 
projects. This issue he 
recreates a host of 
techniques as inspired by 
the top-class sites seen in 
Lightbox. Page 14 


experts 


Animate for the web 
This issue’s contributors 
include award-winning 
interactive designer Chris 
Gannon; Web Designer 
regular Richard Mattka, who 
shows you how to get started 
with GreenSock; and Dan 
Heywood, frontend developer 
and designer at Supremo, 
who offers inspiration and 
seven to follow on Twitter. 
Page 42 


Richard Mattka 


Richard is an award-winning 
interactive director, designer 
and developer. In this fourth 
tutorial in an ongoing 3D 
programming series, he 
shows you how to interact 
with Objects in 3D space 
using the Threejs library. 


David is a journalist with 
over 20 years’ experience in 
publishing and runs his own 
business, Nexus Publishing. 
In this issue he heads to 
Hampshire to talk to the 
talented crew at Studio 
Republic and see how 

they operate. Page 34 
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Cutting-edge features, techniques and inspiration for web creatives 


Chat with the team and other readers and discuss the latest tech, trends and techniques. Here's how to stay in touch... 
webdesigner@futurenet.com e @WebDesignerMag e www.reativeblog.com 


Generate London 2018 
Who is speaking at the conference and what are 
they speaking about? Find out more 


WebKit: The best must-try 
resources out there 
Discover the libraries and frameworks you need. 


Designing for digital 
Andy Culbert, cofounder of digital-first branding 
agency MERé, talks about change in design. 


Lightbox 
A showcase of inspirational sites and the 
techniques used to create them. 


Bankable assets 
Find out how agency CODE D'AZUR 
constructed an AR escape-room experience. 


Ethical Design 
Studio Republic are shaping the digital spaces 
of non-profits and charities. 


PWA power tips 
A host of tips to ensure that the mobile 
experience is the best it can be. 


Discover Express.js 
Five things you need to know about the 


minimalist web framework for Nodejs. 


Hosting listings 
An extensive list of web hosting companies. 


Pick the perfect host for your needs. 


Course listings HEH SGSSESEEESECSCER Cat Oats SES 
Want to start learning online? Check out 


what courses are out there with this list. 
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contents 


TUTORIALS 


50 Creating cursor effects 
Learn how to add some background glow 
to the mouse cursor 


52 Getstarted with Threejs 


The latest in the series shows you how to 
interact with 3D objects in WebGL. 


FILESILO 


96 Getthe latest must-have 
resources and videos 


*60 minutes of freelance video guides 
from Killersites. 

«40 Photoshop filters and 17 animated 
banner ads from Sparklestock. 


56 Design with variable fonts 
Get excited. Variable fonts enable you to load 
one font and manipulate it through CSS. 


60 CodeCsSStransitions 


Use HTML, Sass and JavaScript to develop a Ul 
animation effect for any eCommerce site. 


64 Codewavy line effects 
Find out how to introduce simple animated line 
effects to help with page navigation. 


74 Fivereasons to love Express.js 
Discover what the minimalist web framework for 
Nodejs has to offer the development process. 


myfavouritemagazines 


Visit the Web Designer online shop at 
myfavouritemagazines.co.uk 
for the latest issue, back issues and specials 


80 What’snewin Nodejs10 


Take a closer look at the JavaScript runtime's 
latest updates and what they can do. 


86 Getcreative with code 
Discover the fundamentals of working with the 
Ptsjs JavaScript library and how to create an 
engaging landing page. 


DIGITAL EDITION 


Do you want to get your hands on a digital edition? 
Head to your preferred app store, download, 
install and purchase the issue of choice. 


Google Play — bit.ly/2wetvGp 
iTunes — apple.co/2igtBYq 


Subscribe 
today and 
save 20% 


https://bit.ly/2sGwB3h 
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News 
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Header 


The tools, trends and news to 
inspire your web projects 


Are you going to 
Generate London? 


Last chance to get tickets to see a stellar line-up of speakers 


eb conferences area 
great way to listen and 
learn and this year’s 
Generate London 
(19th-21st September) is no different. It 
has a superb line-up of well-established, 
upcoming and spot-on speakers who will 
impart their words of wisdom and pass 
on their vast bank of knowledge. 

So what does Generate London 2018 
have to offer? It has 16 speakers and three 
workshops spread over three days, all 
hosted at the impressive The Royal 
Institution. You can catch a quick glimpse 
of the location at venue.rigb.org/. 

Keynote speakers include Web 
Standards Lovegod (his words not ours) 
Bruce Lawson; super-smart designer 
Sarah Parmenter; frontend genius Sara 
Soueidan; and the creator of the web’s 
most popular 3D library — Three.js — 
Ricardo Cabello AKA Mr. Doob. 

Keeping this illustrious selection of 
web gurus and experience makers 
company are AR/VR evangelist Alexandra 
Etienne; React Academy founder Kristijan 


(1) CREATIVE BLOO 


creativeblog.com 


2 tech job interviews 


30 portfol 
check out 


Ristovski; digital artist Marpi Marcinowski; 
Asembler creative developer Steven 
Roberts; Clearleft cofounder Richard 
Rutter; CodePen senior software 
engineer Cassidy Williams; and UX 
consultant Laura Yarrow. Head to 
generateconf.com/london/speakers to 
see the complete line-up. 

So what are the key subjects that the 
speakers are concentrating on in 2018? 
Naturally, there’s a strong focus on core 


AR can bring, and what you can do with 
AR.js library. Elsewhere, Web Standards 
Lovegod Bruce Lawson will be talking 
web standards and the mindset required 
to be a ‘shokunin’ of the web. What’s a 
‘shokunin’ of the web? Head to the 
Generate site for more info. And frontend 
UI developer Sara Soueidan will be extra 
busy taking ona talk and a workshop. Her 
workshop ‘Frontend Meets UX: Designing 
& Creating Universal UI Components’ will 


66 Keynote speakers include 
designer Sarah Parmenter 99 


design and development processes, but 
you'll also be able to take a closer look at 
the technologies that are shaping today’s 
and tomorrow’s web experiences. Three. 
js creator Ricardo Cabello will be giving 
an overview of the current state of the 
APIs and how to starting building your 
first VR and AR projects with Three.js. AR/ 
VR evangelist Alexandra Etienne will be 
revealing the advantages that web-based 


In-depth tutorials, 
expert tips, 
cutting-edge 
features, industry 
interviews, 
inspiration and 
opinion. Make 
sure to get your 
daily dose of 
creativity, design 
and development. 


news 


teach best UX considerations and 
practices, and help you apply those 
lessons so you can work your way 
through building components. 

There is so much more to see and 
learn, but you'd better hurry: there are 
only a few days left for you to get your 
ticket and join this smorgasbord of web 
talent. Head to bit.ly/2PvVUOF to get 
yours. See you there. 


Subscribe 
today and save 


O% 


https://bit.ly/2qgLxV14 
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ATTACK 


BROWSER 
SHARE 


Who's in the top 
five worldwide? 
Any surprises? 


Google 


Sw) 6D 


The Chrome browser 
is still on the rise. 


Safari 


14.49” 


Popular on mobile. 
Staying steady. 


» 


UC Browser y 


CP 


Down 1% compared to 
the same time last year. 


Firefox / 


493” 


Giving up 1% to other browsers 
compared with last year. 


Opera | 


Clea 


Popularity waning in Africa. 
Down 6% on last year. 


Source: gs.statcounter.com 
(correct as of Aug 2018) 


Sites of the month 


Landscapes 
& cilies 
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Header 
Inspiration 
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loa, | 


N Storytelling Workshops 


oe 
Graphics 
THEEND 
bit.ly/2wkZi7F 
Smart illustrations with a limited colour 
palette and a story to tell. 


Colour picker 
Window 
bit.ly/2MUDTvj 


#327B99 


#3595A1 


#51A5AA 


#84C4BD 


#BIEOE3 


Typesetter 
Hideout 

bit.ly/2MDpPXN 

A retro, antique font that looks to the past 
for its inspiration. Ideal for branding. 


ABCabc 
0123456 


01. Get the picture 
getthepicture.tours/galleries 

Animated circle transitions abound as they 
present picture galleries. 


02. Shishki Park 
shishkipark.ru/aerotube 

Inventive press-and-hold image and text 
animations that engage. 


03. karlssonwilker 
karlssonwilker.com 

Kicks off with an interactive kaleidoscope. 
What more do you want? 


04. Gabrielle Dolan 


gabrielledolan.com 
Horizontal navigation that goes vertical 
on small screens and neat typography. 


WordPress 


Structura 

bit.ly/2_zma83 

A collection of minimalist one-page designs 
that keeps it simple and the user focused. 


BEST MINIMAL AND DESIGN TIPS 
EXECUTED BY TRUE EXPERTS 
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Discover the musttry resources that 
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webkit will make your site a better place 


WY joeasnaigy 


vue-goodshare 


npm package 1.0.0 § Vue.js 2.4.x or newer J license MIT 


Vue.js component for social share. A simple way to share a link on the pages of your website in the most 


popular (and not so) social networks. Powered by goodshare.js project. 


Goodsharejs |“ 


bit.ly/2MKGLvt 

This a Vue.js component that allows for 
social sharing. Includes a simple install, 
extensive documentation, is SEO- 
friendly and has UI customisation 
options. Supports all the major social 
networks including Facebook, Twitter 
and tumbIr. Plus, a host of lesser-known 
options. Can’t see what you want? Ask 
and the authors will try to add. 


React UI Framework for the Web 


Evergreen 

evergreen.surge.sh 

This is a React Ul framework that 
describes itself as a Design system for 
the web. It offers out-of-the-box 


lazyestload.js 
https://bit.ly/2LRXZBL 

Images can be bandwidth heavy. This 
library only loads images when they 
come into the viewport. If the user 
scrolls past an image it will not load. 


antv.gitbook.io/f2 

F2 is a flexible, elegant and interactive 
charting library with a focus on mobile. It 
is HTML Canvas-based and compatible 
with Node.js, Weex and React Native. 


functionality and full customisation. 


TOP 5 CodePens 


Be inspired by this collection of smart and interesting codebases 


THUMBNAIL HOVER EFFECTS 


THUMBNAIL 02 


CSS Rainbow 
bit.ly/2QOQIbK 

A mesmerising, animated 
rainbow-coloured wave that’s 
constantly on the move. 
Powered by some simple CSS. 


10 


3D Insta Washer 


bit.ly/2PZPZIB 

Inspired by the old Instagram 
logo this CodePen uses CSS to 
create a constantly moving 
animated washing machine. 


resources 


Text animation 
bit.ly/2CcvUFR 

A great example of how text 
can be animated to good effect. 
Multiple animations are created 
with HTML, CSS and JavaScript. 


The Carlton 
dance 


bit.ly/2PWgRTN 
If you don’t know the Carlton 
dance, then why not? This 8-bit 


style animation includes music. 


Hover effects 
bit.ly/2wDd3id 

A host of different animated 
hover effects that are well put 
together. Change the options 
by using the Sass variable. 
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Designing for digital 


Digital-first branding has finally overtaken offline brand design 


he world is finally switching on to the fact that designing for digital channels is an 
essential way to future-proof a business. Digital-first design is ‘second-nature’ to 
designers who have come from a digital background; we know we have to create 
something that works even on the smallest screens, yet up until now, designers - 
including ourselves - have still experienced being handed a brand identity or design 
that simply doesn’t work in some digital channels and has to be totally recreated. 

Part of the problem is shaking off old ways of thinking and approaching design. Sometimes, it’s 
communicating the importance of digital to a wider organisation, or gaining senior level buy-in that 
can be the problem. But what about historic brands created before the digital age? Well Coca-Cola 
and Audi are just some of the household names rethinking their branding from a digital-first 
perspective - because going forward, they need to. 

Legacy branding that was designed prior to today’s ‘digital world’ can be problematic. As to be 
expected, where the predominant representation of the brand (and audience's experience) was 
offline, assets and identities were designed to best cater for these channels to market. Then as new 
digital channels emerged, the branding was ‘shoehorned' into online environments. Many are now 
finding that, as they expand their digital activities, their brand is actually not fit for purpose. It simply 
doesn't ‘work’ digitally. The problem with designing for offline first is that digital branding has a 
different set of considerations versus print. Fonts need to be available for digital and legible at all 
sizes, colours need to be accessible (we aim for anything between AA and AAA compliant) and 
images, logos and other design components need to be carefully considered. Overly complicated 
elements get lost when scaled down to the smallest spaces. Something that looks amazing in print 
might not be usable or functional when applied to a website or app. And it’s easier to scale a brand 
upwards and out if you have considered the smallest first rather than vice versa. 

Video is another consideration and an increasingly important tool to engage with consumers. By 
2020, it’s predicted that online videos will make up more than 80% of all consumer internet traffic, 
yet many organisations give little or no thought to how their brand will move when animated. 

And on top this, digital experiences are constantly evolving. There are more channels than ever 
before, each with different requirements that can alter overnight. A brand identity needs to perform 


Andy Culbert in a multi-screen, multi-channel world, where each device and platform requires different sizes, fonts 
Co-founder of digital-first branding agency MERO and image specifications. Even tone of voice needs are different for online audiences and in different 
http//worksbymero.com channels; think of the vastly different way brands need to be represented on Instagram vs Twitter - 


it’s similar to how you alter your behaviour when visiting an art gallery compared to a nightclub. 

Sh. Il"OUOljuwwxr®zT’._ EZ The digital landscape is prompting a need for brands to be much more versatile. Yet many brands 
still have a set of static, offline brand guidelines that leave digital teams scratching their heads! One 
way that marketing teams and designers can better prove the worth of digital-first design is by 


66 C G 1 qd [\ ‘él $ getting to know the needs and reactions of the customer better and using this to prove 
OCa O a all u ] effectiveness. Digital-design allows this to happen much more easily. It’s more effective to test a 
are just Some of the brand online than offline. We can use a variety of tools to help make some really informed decisions. 


Digital design means we can look beyond whether the majority, or even one person, has a 


household names preference to the overall look and feel. It has to be tested to ensure ‘it works’ and resonates with the 


end user. Tangible and measurable results will drive the end product rather than opinions of few. 


rethinking their A digital-first approach is also vital for those brands wanting to future-proof their business by 


connecting with the next generation of consumers. Millenials and their Gen Z successors have high 


branding from a digital- standards when it comes to the digital expectations they put on brands. Gen Z especially have been 


fi . raised by the internet. They're multi-taskers, sometimes juggling up to five screens at a time, which 
irst perspective 99 means they're easily distracted. A brand's online experience needs to be slick and seamless across 


all touch points. And above all it needs to be flexible to stay relevant to their audience. Digital-first is 


the only approach that can achieve this. 
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will make your site a better place 


display grid-template grid-gap justify-items 


grid-template-columns: 12px 12px 12px; grid-row-gap: 1px; justify-items: 
display: grid; grid-template-rows: 12px 12px 12px; grid-column-gap: 9px; 


grid-template-columns: repeat(3, 12px); grid-gap: 1px 9px; justify-items: 
display: inline-grid; grid-template-rows: repeat(3, auto); 


grid-template-columns: 8px auto 8px; grid-gap: 6px; justify-items: center; 
display: subgrid; grid-template-rows: 8px auto 12px; 


grid-template-columns: 22' c justify-items: stretch; (default) 
grid-template-rows: 22: juto 


align-items justify-content align-content grid-auto-flow 


align-items: start; justify-content align-content grid-auto-flow: row; 


align-items: end; justify-content H align-content: H grid-auto-flow: column; 


align-items: center; justify-content align-content: center; grid-auto-flow: dense; 


Vivid.js leon Style 


GRID eeses 


»WorkerDOM 


grid.malven.co oQhiiNMi ea ———e 

Grid layouts are big news and are the HokK@#H@ a s | al 

ideal way to create super-flexible and 2 = si é 

unique layouts. Any thing that helps to Vivid.js Bit worker-dom 

make the process easier is always worth webkul.github.io/vivid bitsrc.io bit.ly/2CoukRB 

a look. GRID is a simple, straightforward Need some neat SVG icons that are Bit is cloud component hosting. Hosting In short worker-dom is “The same DOM 
interactive cheat sheet. Pick the layout ready to go? Vivid provides an easily components in the cloud means teams API and Frameworks you know, but ina 
you want and the code gets copied to customisable set of over 100 icons that can discover and organise the Web Worker”. Make sure you pay a visit 
your clipboard ready to use. look good anywhere. components of their projects. to find out more. 


TOP 5 multi-purpose WordPress themes 


Need a theme that has more than one look and design. Check out this selection 


(o>) 
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VR Ultra 
for Your Special Life's 
Memori 


Search Your City‘s Finest 


Avada Impreza Canvas Bridge Directory Box 


bit.ly/2dQQSOv bit.ly/2NE3mWV bit.ly/2LRCtO5 bit.ly/2DqehPt bit.ly/2PwLox1 

Powerful options and tools, A multi-purpose WordPress A multi-purpose Bootstrap- Whatever type of site you want This theme has a focus on 
unlimited designs anda theme, created with the best based template with 850+ niche, | to start creating this theme has directory-style sites. Ithas a 
responsive framework make practices of modern site multi-page and one-page layouts | an option for it. Check out the number of pre-designed 
this great for customisation. building. Check out the demos. with 1,000+ UI features. 376+ demos that it has on offer. templates for you to use. 
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66 Barcelona-based artist Mariano Pascual’s online gallery portfolio 
is reimagined as a stylised operating system full of surprises 99 
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LightBox 


Colours 


#DADADI #4196CD 


#FAD843 #E64F47 


Tools 


HTMLS5, CSS3, jQuery, SVG 


Fonts 
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Roboto by Christian 
Robertson and available via 
Google Fonts is used in 
Regular and Bold varieties. 


Projects 
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Plastic Thoughts Discotexas 36 Days of Type Staf Magazine La Velocidad de 
#1 una Fiesta 


Plastic Thoughts 


Plastic Thoughts 


“Plastic Thoughts” is a state of absurd fantasy and 


excessively optimistic, an unreal situation, so ideal that 
almost lunatic. A kingdom in the clouds, which can not 


be seen and neither can have shapes. “Plastic Thoughts” 


is a fictional paradise where everything is perfect and, 


therefore, it does not even exist 


Above 

Plastic Thoughts and other projects 
can be viewed within floating 
windows that can be dragged, 
dropped and closed 


Middle 

Packed with humour, the site has 
‘settings’ for switching desktop 
backgrounds, screen size and the 
application of colour filters 


Bottom 

Leave the site idle for a moment or 
two and the desktop shows an 
animated desk toy screensaver 
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How to create an 
interactive pop-up box 


Use CSS and JS event listeners to create pop-up boxes activated from regular link references 


LightBox 
Mariano Pascual 


1. Initiate HTML document 
The first step is to initiate the HTML document structure. 
This consists of the HTML document that contains two 
sections - head and body. While the head is used to 
contain references to the external CSS and JavaScript 
resources, it is the body section that will be used in step 2 
for storing the page content elements. 

<!DOCTYPE html> 

<html> 

<head> 

<title>Popup Box</title> 

<link rel="stylesheet” type="text/css” 

href="styles.css”" /> 

<script src="code.js”></script> 

</head> 

<body> 

*&* STEP 2 HERE 

</body> 

</html> 


2. HTML content 


The HTML content consists of a sample navigation and 
an article container used as the pop-up box. Links will 
activate their associated pop-up box by using their ‘href’ 
attribute to reference the box’'s ID. A ‘data-popup' attribute 
is applied to any container element that is to be used as a 
pop-up box. 
<nav> 
<a href="#box1”>Open Lightbox</a> 
</nav> 
<article id="box1” data-popup> 
<h1>Hello</h1> 
</article> 


3. CSS initiation 


Create a new file called 'styles.css: The first step of the 
stylesheet initiates the presentation of the page 
document. Default colours are applied for the page 
background and content colour, as well as a guarantee 
for no visible border spacing. The default font is also 
applied for all content to inherit. 
html, body { 

display: block; 

height: 100%; 

background: #000; 

color: #fff; 

padding: Q; 

margin: Q; 

font-family: serif; 


4. Pop-up definition 
Container elements using the ‘'data-popup' attribute 
are set to display with a width and height that's 
proportionate to the browser window. Similarly, fixed 
positioning is used to position the element with 
co-ordinates calculated in proportion to the browser - 
guaranteeing centred positioning. A negative z-index 
results in the element being hidden below the visible 
page - and to become visible when the value of the 
‘data-popup' attribute is set to ‘open’ 
[data-popup]{ 

position: fixed; 

display: block; 

width: 5@vw; 

height: 5Qvh; 

top: 25vh; 

left: 25vw; 

Z—NGeX sa ilk 
.2mm solid #fff; 
padding: lem; 
overflow: auto; 


border: 


box-sizing: border-box; 
3 
[data-popup="open" ]{ 
z-index: 99999; } 


5. Close control 
The close button is made from an element created in 
step 7 that contains the ‘data-control' attribute set to 
‘close’ It appears at a specification co-ordinate calculated 
in relation to the browser window size. The content size 
of this element is set to double the size of the pop-up box 
content size. A white background and black content 
colour are also applied. 
[data-popup] [data-control="close”]{ 

position: fixed; 

top: 25vh; 

right: 25vw; 

font-size: 2em; 

font-weight: bold; 

background: #fff; 

color: #000; 

padding: @ .25em; } 


6. JavaScript initiation 

Create a new file called 'codejs: This step applies an 
event listener to the browser window that will be used to 
activate the JavaScript code after the page has loaded. 
This is important to avoid the JavaScript returning errors 
due to content elements not being available at the time 
of its execution. 


window. addEventListener ("load", function(){ 
*x* STEP 7 HERE }); 


7. Pop-up box code 
A search for every page element with the ‘data-popup' 
attribute is performed. Each item found has a closed 
button applied to - ie the one referenced in step 5. This 
button has a ‘click’ event applied that will result in the 
parent ‘data-popup' attribute being set to ‘closed’ - ie not 
‘open’ results in the pop-up box disappearing. 
var nodes = document.querySelectorAl1('[data- 
popup]'); 
for(var i=0; i<nodes.length; it++){ 
var ctrl = document.createElement ("span") ; 
ctrl.innerHTML = "&times;”; 
ctrl.setAttribute("data-control”, close”); 
ctrl.addEventListener("click", function(){ 
this.parentNode.setAttribute("data-popup”, 
"closed”) ; Hole 
nodes[i].appendChild(ctrl); } 


8. Make it visible 


A search is performed for all links containing an href 
attribute beginning with '#' - ie those referencing an 
on-page ID element. Each of these links has a ‘click’ 
event listener applied, which will check to see if the 
referenced page element has the ‘data-popup' attribute. 
Its value will be set to ‘open' - triggering the visibility of 
the found element. 

var nodes = document.querySelectorAl1('[hr 

ef*="#"]'); 

for(var i=0; i<nodes.length; it++){ 

nodes[i].addEventListener("click”, function() 


var box = document.querySelector(this. 
getAttribute("href”)); 
if(box != null && box.hasAttribute("data- 
popup”) { 
box.setAttribute("data-popup”, "open”); 
saath 
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Natalie Portman (+) The Revolution of Desire 


18 lightbox 


Designer: 
Louis Ansa louisansa.com 
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66 Four recognisable fernale faces unite for an inspiring endorsement 
of inner beauty, applying engaging multimedia design techniques 99 
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#EIDFD7 #F7C8AE 


#865229 #FFCF9E 


Tools 


GSAP, PixiJS 


Fonts 
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EF Hawthorn is a font 
designed by Esselte 
Letraset and Mike Daines 
and used here for key 
headings and <span> 
paragraphs. 
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The Messina Sans font by 
Luzi Gantenbein for Luzi 
Type styles the main story 
text in Light, Regular and 
SemiBold varieties. 


ABOUT 


‘omen’s 


We must do better 
28.01.2018 


Above 

Visitors drag an opening carousel to 
select between the stories of Natalie 
Portman, Emma Watson, Jennifer 
Lawrence and Cara Delevigne 


VI Pe 
fF : 5 Middle 
CHILDREN S Spoken word audio is played back 
Saal in sync with text highlight 
animations to narrate the 
experience and give the content 
humanity. 


Bottom 
By colouring the text to match the 
background while applying a thin 
2016) stroke, certain words are made 
a : os hollow to emphasise other phrases 
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LightBox 
Beyond Beauty 


Create an animated bubble 
background effect 


Make empty space more appealing with this eye-catching animated effect 


1. Document template 

The first step is to define the template structure of the 
HTML document. This consists a HTML container for 
describing the document, consisting of sections for head 
and body. The head section is used to reference the 
JavaScript and CSS resources, while the body section is 
used in step 2 to store the visible content elements. 
<!DOCTYPE html> 

<html> 

<head> 

<title>Bubble Background</title> 

<link rel="stylesheet” type="text/css” 
href="styles.css” /> 

<script src="code.js”></script> 

</head> 

<body> 

*&* STEP 2 HERE 

</body> 

</html> 


2. Body content 
The page content consists of a ‘main’ container used for 
storing the effect. Visible text is placed inside the child 
article, allowing its content to avoid interference from any 
manipulation that will be applied via JavaScript and CSS. 
The use of the article as a container for content will also 
provide control for keeping all content to be displayed 
above the bubbles. 
<main> 
<article> 
Hello 
</article> 
</main> 


3. Hide overflow 
Create a new file called 'styles.css: The first step is to 
define the presentation settings for the 'main' container 
that the effect will be applied to. A black background is 
applied, along with hidden overflow to cut out content 
not intended to be visible. Width and height are set 
relative to the browser window. 
main{ 

position: relative; 

display: block; 

width: 7@vw; 

height: 5Qvh; 

overflow: hidden; 

background: black; 


4. Main article 
The article container inside 'main' is used to control the 
presentation of the foreground content. Absolute 
positioning is used to allow z-index positioning, which is 
set to 1 in order to be above the bubbles. To keep this 
tutorial short, a default font size and colour is applied for 
text to inherit. 
main > article{ 

position: absolute; 

font-size: 5Q@vh; 


margin: Q; 
color: #777; 
z-index: 1; 


} 


5. Bubble elements 
Bubble elements will be defined using the ‘data-bubble’ 
attribute. These will require absolute positioning in order 
to move - achieved through applying the 'move’ 
animation. Each bubble element is placed out of view 
towards the left using the same space as its width. 
Applying a maximum border radius results in each 
bubble element appearing as a circle. 
[data-bubble]{ 
position: absolute; 
z-index: Q; 
left: -10vh; 
z-index: Q; 
height: 1vh; 
width: 1@vh; 
background: #333; 
border-radius: 100%; 
animation: move 10s forwards infinite 
linear; 


} 


6. Applying the animation 
Bubble movement speeds are modified using the 
‘nth-child' selector, which is used to alter the animation 
speed applied to groups of bubbles. The 'move' 
animation is defined using just the final 'to’ frame, 
describing the co-ordinates that the bubbles should 
animate to. With starting frame in the animation, each 
bubble will animate from their default position. 
[data-bubble] :nth-child(4n){ 
duration: 25s; } 
[data-bubble]:nth-child(4n+1){ animation- 
duration: 15s; } 
[data-bubble]:nth-child(4n+2){ animation- 
duration: 10s; } 
[data-bubble]:nth-child(4n+3){ animation- 


animation- 


duration: 20s; } 
@keyframes move { 

to { top: -2@vh; left: 100%;} 
i 


7. Search 
Create a new file called 'codejs. The first step of 
JavaScript is to apply a ‘load’ event listener to the 
browser window that will trigger function. The function is 
used to modify the page's ‘main’ container - which 
wouldn't be available until after the page has loaded. The 
‘amount’ variable is set to control how many bubbles are 
created using the following ‘for’ loop. Each bubble is 
created in step 8. 
window. addEventListener("load” , function(){ 
var parent = document.querySelector("main”) ; 
var amount = 10; 


for(var i=; i<amount; i++) 


IDR 
8. Create bubble 


Each bubble is created as a span element, with the 
‘data-bubble’ attribute applied. Unique vertical positioning 
is achieved by setting the ‘styletop’ attribute with a 
random number up to the parent main height. After 
these updates, the new element is appended to the 
parent container using the ‘parent’ reference carefully 
defined in step 7. 

var node = document.createElement (“span”) ; 

node. setAttribute("data-bubble” ,"”); 

node.style.top = (Math.random()«parent. 
offsetHeight)+"px"; 

parent. appendChild(node) ; 


i 
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Laravel (PHP MVC), Polyfill 
10, Vuejs, Instagram API 
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Helvetica Neue font 
is employed almost 
exclusively by the site, 
using the font-weight 
property to apply 
multiple typefaces. 
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Helvetica Neue is also used 
in its Extended family form, 
appearing in both Thin and 
Black weightings. 
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How to code a circular 


expansion container 


Enable content containers to act as navigation components by allowing them expand into view 


1. Document initiation 

Initiate the page using a description of the document. 
This consists of the HTML document container, which 
stores the <head> and <body> sections. While the <head> 
section is used to reference the required JavaScript and 
CSS resources, the <body> section will be used in the 
next step to store the page content. 


2. Page content 
The page content consists of two content containers 
using the ‘data-expand’ attribute. Each container has a 
‘data-control’ to be used as an interaction button, along 
with a section container. Placing content inside the 
section container enables easy CSS rules to be 
created that can show or hide the content. 
<article data-box="1" data-expand> 
<span data-control="expand”></span> 
<section> 
<h1>Hello</h1> 
</section> 
</article> 
<article data-box="2" data-expand="closed"> 
<span data-control="expand”></span> 
<section> 
<h1>Hello</h1> 
</section> 
</article> 


3. Unique container styles 
Create a new file called ‘styles.css. This step uses the 
unique values applied to the ‘data-box’ attribute of 
the containers to set a custom background. Box 1 
has a background image that will cover the full size 
of the container, while box 2 has a plain colour for 
its background. 
[data-box="1"]{ 
background: url('background. jpg’); 
background-size: cover; 
ys 
[data-box="2"]{ 
background: red; 


aj 


4. Initial expand settings 

Containers using the ‘data-expand’ attribute are initially 
set to appear using normal HTML content flow. Their 
sizes are set in proportion to the browser window using 
width and height, with 100% ‘border-radius’ to appear 
as a circle. The applied transition will ensure that any 
changes to these defined settings will appear animated 
over a duration of one second. 


24 lightbox 


[data-expand]{ 
position: relative; 
display: block; 
top: Q; 
left: Q; 
width: 10vw; 
height: 10vw; 
border-radius: 100%; 
transition: all 1s; } 


5. Expand section 
The section container inside the expansion element is set 
to be hidden by default using zero opacity. The default 
size is set, with central positioning within the container 
guaranteed with auto values applied to the left and right 
margins. The ‘transition’ attribute makes sure that all 
changes are animated over a duration of one second. 
[data-expand] > section{ 

opacity: Q; 

width: 50%; 

height: 50%; 

margin: 10% auto @ auto; 

transitions alleis:) }, 


6. Control options 
Settings for elements inside the expansion container that 
have the ‘data-control’ attribute are set to appear as a 
Icm silver circle. A virtual ‘before’ element is used to 
provide CSS with control of content to display over the 
data control. This step also sets default content character 
as ‘+’ for the ‘data-control’ element set as ‘expand’. 
[data-expand] > [data-control], 
[data-control] > [data-control]: :before{ 
position: absolute; 
display: block; 
background: silver; 


color: #000; 
width: 1cm; 
height: 1cm; 


font-size: 1cm; 
text-align: center; 
border-radius: 100%; 

3 

[data-expand] > [data- 

control="expand” ]: :before{ 
content: "+"; } 


7. Open status 

The expansion container has different settings applied to 
it and its section, and ‘data-control’ elements when its 
value is set to ‘open’. New size and co-ordinates applied 


to the expansion container using fixed positioning 
guarantee its visibility regardless of page scroll location. 
Section opacity set to I will animate the content into 
view, while the ‘data-control’ element's content 
changes the icon symbol. 
[data-expand="open"” ]{ 
position: fixed; 
width: 5®vw; 
height: 5@vw; 
top: 2@vh; 
left: 25vw; 
3 
[data-expand="open"] > section{ 
opacity: 1; 
3 
[data-expand="open”] > [data- 
control="expand"”]: :before{ 
eontents sist 


8. JavaScript: Control search 
Create a new file called ‘code js. This step waits for the 
page to complete loading, upon which it will execute the 
JavaScript. The first step of the JavaScript is to search for 
the controls inside the expansion container — specifically 
those with the ‘expand’ value. A ‘for’ loop is used to apply 
Step 9 to each item found. 
window. addEventListener("load” , function(){ 
var nodes = document. 
querySelectorAl1(’ [data-expand] [data- 
control="expand"]’); 
for(var i=; i<nodes.length; it++){ 
**k STEP 9 HERE 
Ds 


9. JavaScript: Click event 
Each of the elements found from Step 8 has a ‘click’ 
event listener applied — triggering a function to be 
executed whenever the user clicks or taps on the item. 
This function will toggle the value of the ‘data-expand’ 
attribute between ‘open’ and ‘closed’, which in turn 
triggers visual changes defined within the CSS. 
nodes[i].addEventListener("click”, function(){ 
var parent = this.parentNode; 
if(parent.getAttribute("data-expand”) != 
"open”) 
parent.setAttribute("data-expand” , 
"open”) ; 
else 
parent.setAttribute("data-expand” , 
"closed"”); 
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THE LOCKDOWN 


thelockdown.com 
iOS: https://apple.co/2wCZmyW 
Android: https://play.google.com/store/apps/ 
details?id=com.abnamro.thelockdown 


AGENCY 
CODE D’AZUR 
codedazur.com 
@codedazur 
PROJECT DURATION 
15 weeks 


PEOPLE INVOLVED 
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STH NNECTED WORLD CONTINUES TO 
A PROGRESS AT LIGHT SPEED, THE BANKING 

sector is a critical arena for innovation. This is, 
of course, largely reliant on the attraction of new 
talent into the industry and the attraction of the 
brightest IT prospects from each generation. The 
inherent challenge then is convincing these kinds of 
fledgling technologists that “traditional” banks are 
modernising enough to excite them, while providing 
a worthy platform for their skills. So when Dutch 
bank ABN AMRO was facing a huge recruitment drive 
for the brightest IT minds, it needed something 
special. In a campaign to find over 400 of such IT 
and digital professionals, it decided to eschew 
posting the normal job ads for something more 
ambitious and progressive, resulting in a partnership 
with creative agency CODE D’AZUR and an incredible 
Augmented Reality (AR) experience. Billed as the 
world’s first mobile AR escape room, The Lockdown 
is an immersive online game that uses ARCore and 
ARKit on Android and iOS platforms to render an 
inspiring storytelling adventure. Set in 2028, money 
has been wholly digitised and secured on the 
blockchain only for the system to crash and call on 
the players IT prowess to fix the leak over a series of 
challenges. “Blockchain was considered innovation 
technology a few years back, but now the bank 
already employs it for several processes,” begins 
Creative Director Jeroen Thissen. “For that 
technology, as well as other emerging tech, it needs 
specialists, but also developers and data analysts. 
The brief was, therefore, to create a recruitment 
campaign that stands out, and is compelling, while 
fitting the interests and frame of reference of the 
target group.” Thanks to intense collaboration 
between ABN AMRO and CODE D’AZUR with its 
partners, The Lockdown was created in under just 
15 weeks and by speaking to the team involved we 
discover how. > 
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WORLD'S FIRST MOBILE 
AR ESCAPE ROOM 


SUCCESSFUL 
SUBTLETY 


One of The Lockdown’s 
boldest strategies was the 
willingness from the client to 
not make it overtly branded. 
From the outset ABN AMRO 
appreciated a goal to avoid 
cynical marketing and obvious 
promotion, in favour of a more 
subtle approach. “Again, the 
idea was to serve the objective 
for positively changing the 
player’s perception of the bank, 
without the bank being too 
much in their face,” explains 
Design Director Priscilla de 
Gier. “Branding might cause 
people’s original perception of 
the bank to be hesitant to play 
the game.” This foresight, and 
also acommitment for not 
talking down to a tech-savvy 
target audience, could be cited 
as reasons for the game’s 
subsequent success since 
launch. Some of the impressive 
numbers here include a 73 
percent target audience reach 
in the Netherlands of 311k, 
downloads exceeding 10k 
across iOS and Android, plus 
over 10,641 unique visits to 
ABN AMRO’s recruitment 
website. With reviews of the 
app averaging 4.4 out of 5 
stars, a whopping 42k minutes 
were spent playing the game 
over a six-week period. “The 
story was quickly picked up by 
the IT community and media, 
showing to IT professionals in 
The Netherlands and the rest of 
the globe that ABN AMRO is an 
innovative and challenging IT 
employer,” confirms Creative 
Director Jeroen Thissen. “The 
story featured in Dutch leading 
tech platform Bright.nl as well 
as media like VR Focus, 
Android Police, Contagious, 
The Next Web, Computable 
and iCulture.” Not to mention 
Web Designer Jeroen! 


PARTNERS AND PERCEPTIONS 

Based in Amsterdam and Barcelona, CODE D’AZUR are 
an agency that creates digital services and campaigns 
for global brands such as KLM, Red Bull and Telez2. In 
addition, a long-standing working partnership with 
ABN AMRO bank suggested a trust between both 
parties for tackling this latest project. CODE D’AZUR’s 
mantra of “Stand Out. Fit In.” seemed immediately 
ideal for something so innovative, while inevitably 
requiring additional expertise to pull off. “It was 
obvious that a project like this, being the first of its 
kind, needed the combined knowledge and skills of 
a great many professionals and areas of expertise,” 
continues Thissen. “We involved the experts of 
Sherlocked, for example. They are the team behind 
some of the most successful and award-winning 
escape rooms, with two of them being here in 
Amsterdam.” To undertake this project in sucha 
short period of time, the agency would need to work 
together closely with the client and these other 
partners, opting for an agile process. This enabled 
ABN AMRO to be very involved in every step of the 
project. “Specifically this meant that we worked 
closely with the bank to tackle the themes, 
information in the challenges and the methodology 
of them. Being a bank that produces a game that 

is specifically targeted towards IT and digital 
professionals, the facts and challenges that you 
present them with need to be correct as well as 
realistic.” A common discussion throughout would 
be how recognisable the bank’s brand will be, how 
prominently it should preside. Being such an open 
client, ABN AMRO recognised that for the game to 
most effectively change the perception of the bank 
as an employer, its brand shouldn't be overly present 
in the game. “This was translated to where the game 
would feature the bank’s iconic green colours, but 


c 


“EVEN THOUGH THE SCENARIO WOULD BE FUTURISTIC, 
IT NEEDED TO FEEL LIKE A CLOSE FUTURE” 


is 


nothing more. The only reference to the bank is 
featured at the very end of the game, when it’s 
completed, to invite players to put their skills to 
work and apply for a job.” 


COMBINED EXPERIENCE 

As an initial concept, the escape room idea had been 
something the client had used in previous recruitment 
campaigns. They had always been physical locations 
however, so the amount of engagement was limited 
by the amount of people that could be 
accommodated. The idea for The Lockdown was to 
introduce themes like blockchain, cryptocurrency, 
artificial intelligence and infosecurity into a virtual 

AR escape room open to all. “We wanted to create a 
scenario for this game that allowed players to dive 
into challenges that the bank faces today and will face 
in the close future. Challenges in infosecurity and 
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artificial intelligence are becoming more common and 
blockchain is starting to be an integrated part of 
processing not only at the bank, but also throughout 
technical processes in other industries.” This implied 
to the designers that even though the scenario would 
be futuristic, it needed to feel like a close future that 
could conceivably take place a decade from now. “In 
terms of how the game should look and feel, we 
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immediately knew that AR changes the playing field When it came to the visual and graphic design work, 
completely when it comes to user experience,” efforts were purposefully steered away from giving 
explains Design Director Priscilla de Gier. the game too much of a sci-fi feel. Favouring a more 
“Experiencing something ‘flat’ or 2D, can’t be realistic futuristic setting that would be easy for 


compared to an experience where you can walk up or players to dive into, the team looked to references 
even through elements that are in front and around of suchas TV series Black Mirror for inspiration around 
you. In AR there are so many more and other ways to what 2030 might look like. “It’s been important to 


solve challenges.” Indeed, this distinct difference in match all art direction of the videos, 3D and UI, to 
user experience meant that from the outset the team bring this vision to life,” Priscilla continues. “The many Po 
had to approach design, technology, development mood boards at the beginning of the project were key 
and creation cohesively to ensure user flow was right. __ in crystallizing the visual style of the game. For the | 4 
“We’ve wanted to use the AR technology to its full optimal experience and the style to be ultimately ee | 
capacity. The AR user experience was not only realistic, we’ve worked closely with A.I. and blockchain V 
integral to thinking about how the challenges were experts to ensure every detail was where it’s vo 
solved but also to details about how the player supposed to be. All visual details in the game are 
would enter their answers in the system.” correct. There is no bogus code or details in there > 
jG 
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RS LGR A WO RTHY that wouldn’t work in real life.” This approach would 
: = PLATFORM also acknowledge the decision to keep branding 
subdued and passive, using subtle styling like ABN 
AMRO’s corporate typography and colour palettes 
The Lockdown was always across certain assets. “The starting point was to 
designed to be the main focal simulate game elements analogously, testing what an 
point of client ABN AMRO’s AR rendering of the feature would look like displayed 
recruitment campaign. This in the real world. This meant a lot of back and forth 
would naturally be supported between the digital and the analogue world to ensure 
by other supplementary the high level of realism was achieved. The game is 
marketing efforts alongside, all built in Unity, which also meant we had to push the 
geared to driving traffic toward boundaries to ensure the game was realistic, looked 
the game and the message at beautiful, but these choices were not detracting from 
’ its heart. “The game itself is the performance of the game.” The close collaboration 
6. SCLERA COLOR ultimately about raising between the in-house design team and the 
oO “s o : awareness of the bank being development team has meant that lines were 
4 = =e = =much more of a challenging IT incredibly short and conducive to maintaining a high 
o * employer than players would quality in visual result. “The design team has had 
- expect,” underlines Creative control in ensuring the design would be executed 
Director Jeroen Thissen. properly, by actually making the designs themselves 
y ‘ j = “A place where talent can in Unity. This way the developers had all feedback and 
é = contribute to the bank’s and continuous support, and together created pixel- 
societies challenges regarding perfect execution.” 
artificial intelligence, 
infosecurity, blockchain and ENGINEERING AUTHENTICITY 
cryptocurrency. So it’s been In terms of the development side, this was always a 
especially great to see the project where development considerations had to run 
game taking off so well within right through it. The awareness for the technology 
the target market, and even was hugely important therefore, aided by the recent 
see game reviews asking for a focus on AR platform support from Google and Apple. 
second part of the game. Plus With ARCore and ARkit respectively showing major 
it has also proven to be a great advancements, the overall technical challenge was 
example of what can be done made fairly smooth sailing. “However, one of the 
with AR to create an immersive challenges that we did encounter was a memory issue 
and engaging brand with all the high resolution textures we had to include 
experience. Perhaps even in the holodesk and ‘info-wall’ in the game,” as 
specifically proving that AR, Technology Director Erik Rave concedes. “We wanted 
which such high engagement players to not only view the many documents, 
potential, is the ideal pictures and other key items from far away, but also 
technology to shape the way be able to zoom in. This meant that all assets had to 
your potential customers or be high resolution, but this would not be able with the 
recruits see your brand.” memory. What we then decided is to make certain 
items clickable and then expand for the player. Most 
items are still very high resolution, to maintain the 
level of realism, of actually being able to walk up to 
your info wall and have a close look at what’s up there. 
With this solution we've found a way to adjust the UI 
to best fit both the design and the concept goals, as 
well as to elevate the usability of the game.” That 
pursuit of high-resolution realism also translated into 
the challenge of making the world authentic. Often a 
gripe of Hollywood's portrayal of technology is those 
computer screens that apparently a hacker is using to 
hack something, only for the display to look blatantly 
false or fake. Since IT and digital professionals were 
the target group of the game, the team knew it 
needed to avoid this at all cost. “What ties into that is 
the additional contribution of the technology team in 
the shape and difficulty level of the puzzles. The team 
is the target audience, so it’s been great to test and 
play around with the development of the challenges. 
This, in combination with help from the experts from 
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the bank in creating realistic scenarios that people 
encounter there, as well as escape-room experts, has 
been key in successfully creating challenging and 
engaging puzzles throughout the game.” 


NUMBER CRUNCHING 

The launch process was suitably geared to meet the 
game’s target audience, too. Unveiled during one of 
Europe’s leading technology conferences, The Next 
Web, it simultaneously had its landing page, banner 
ads and even cinema trailers go live before showings 
of the new Solo Star Wars movie. 

“During the opening of the conference, with 3,000 
people in the audience, we hacked the conference,” 
laughs Thissen. “Screens went black and our hacker 
delivered a special message to the audience that 
challenged them to play the game. This was 
supported by a stand at the conference where people 
could not only chat to the bank, but also play the 
game on sample phones. It was great to see that we 
had a few bright minds actually solve the complete 
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game under 30 minutes, naturally, they were invited 
for a coffee.” The weekend after this launch event 
yielded thousands of downloads and very quickly saw 
the story get picked up by the IT community and 
media. Spreading the desired message at home and 
internationally, a total reach of 311,000 was achieved 
within the Netherlands — in other words, around 73 
percent of the working IT talent in the Netherlands 
had been reached solely with the earned media of the 
campaign. So with such promising engagement 
figures to date, do the CODE D’AZUR guys anticipate 
more to come? “Since we've left it open ended, who 
knows what will lay in store for The Lockdown,” grins 
Thissen, cryptically. “With the development of AR now 
by Apple and Google, we expect so much more to 

be possible in future. Unlike VR, AR has a very low 
participation threshold, you aren't closing yourself 

off to your environment, and actually can share your 
experience with more people than yourself. It wouldn’t 
be surprising if this and next year, we'll come across 
many more AR experiences.” 
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Technology Director Erik Rave gives us 

his instant response to what it is about 

the project that makes him and the rest 
of the crew most proud and why. 


“I’m very proud of the realism we achieved 
in the overall experience and look of the 
game. Though it’s set a decade from now, 
it doesn’t feel overly sci-fi and truly feels 
like any space youre in is transformed 
to your own escape room” 
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Jack De Wolf (Client 
Director) and Dee Russell 
(Brand and Marketing 
Lead) putting their heads 
together for an upcoming 
project pitch. 
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Lead by a strong ethical 
compass, Studio Republic 
improve the lives and ‘| /|//// 
environment of the people 
their work impacts upon: 
Shaping the digital spaces) of 
non-profits and charities; this 
agency has a foundation of 
integrity that shines bright 
throughout their work 
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Ethical Design 


Who 
Studio Republic 


What 
Web design, Website development, 
MODX CMS development, Branding 
and corporate identity, Graphic 
design, Charity branding and 
campaigns, and Advertising 


Where 
10 Charlecote Mews, Winchester, 
Hampshire, SO23 8SR 


Web 
studiorepublic.com 


Key Clients 
Ismybillfair.com 


The Green Party 
Ordnance Survey 
Chartered Institution of Water and 
Environmental Management 
(CIWEM) 

Sailors’ Society 


IN 2003, STUDIO REPUBLIC, LIKE MANY 
DESIGN AGENCIES, BEGAN IN A SPARE ROOM. 
Chris Todhunter, the Digital Director and the 
Founder of Studio Republic, originally created 
the business as a digital freelance resource for 
local agencies. However, Chris’s journey to that 
point wasn’t all plain sailing. 

Dropping out of his Software Engineering 
Management course at Bournemouth 
University, Chris spent his spare time touring as 
a drummer with various bands, playing gigs 
across the country — and even having the 
opportunity to play at Glastonbury. It wasn’t 
until his meticulous attention to detail scored 
him a job as an artworker that his path in the 
creative field started to take hold. 

When the digital era started, Chris found his 
true passion — web development. Excited by 
the new advancements in the tech world, he 
spent his evenings teaching himself how to 
code. As the digital industry grew, Chris’s 
talents grew alongside it. Chris’s flair for tech 
generated enough business for him to start 
working as a freelance developer and, before 
long, he had so much work he started thinking 
about expansion, so Studio Republic was born. 

“For the next eleven years, Studio Republic 
worked to provide its clients with high quality, 
ahead-of-the-curve digital services — doing 
such a good job that some of our very first 
clients still work with us today,” Chris explains. 
“But it wasn’t until 2014, when Jack De Wolf 
joined Studio Republic as Client Services 
Manager, that the business started to become 
what it is today.” 

Jack De Wolf graduated from university 
with a first class BA Hons in Design and went > 
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“AS well as keeping up-to-date with 
new technologies, we’re keen to roll 
up our sleeves and develop new 
tools ourselves. In an effort to 
balance our collaborative approach 
with clients and get rid of any 
bottlenecks in our planning, 
designing, building, managing and 
training processes, we’ve started 
using a new system that we’ve 
designed and built as a plugin for 
our MODX CMS systems” 


Chris Todhunter 
Digital Director and Founder 


straight into the industry to work as a designer 
for a London agency. Not enjoying London life, 
and realising that working as a designer wasn’t 
the right fit for him, he spent the next few years 
travelling the world. 

Upon his return to the UK, Jack worked ina 
variety of industries — from recruitment to 
footwear — trying out various roles before 
realising that he still had a love for the creative 
sector, but wanted to take on more of a 
client-facing role. In a Business Development 
Management role for a company on the South 
Coast, he realised he’d found the right fit. 

“When Jack joined the team here at Studio 
Republic, he took our client list and grew it 
significantly,” says Chris. “Jack and | worked 
hard to realise the potential of Studio Republic 
as a full service, digital creative marketing 
agency specialising in the charity, not-for-profit 
and ethical arena. In 2017, when Jack became 
Partner, Studio Republic really took off as an 
ethical creative digital agency. Since then, the 
agency has gone from strength to strength. Our 
team has grown significantly, and we’ve never 
been happier doing the work we love, for the 
people who make the world a better place.” 

Chris explains how he named the business: 
“It’s always the way when you think of a great 
business name that someone has already 
purchased the domain name. Competition 
wasn’t as fierce back then as it is now, but out 
of the long list of 20 or so name options, half 
had been taken. To me, Studio Republic best 
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Halina Myers (Designer) 
and Harley Southwick 
(Lead Designer) at work 
on their latest project 
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summed up the independent nature of the 
business, and the rest is history.” 

Agencies approach their websites as calling 
cards and often as a first point of contact for 
potential clients. As Chris explains, keeping 
their own site up-to-date is often a challenge: 
“Our clients’ websites always take priority, 
which leaves very little time for our own site 
and has often pushed our own marketing to 
the back of the queue. 

“In the past, we’ve been pretty slack when it 
came to updating our own site, but now, with 
our new focus and larger team, we ensure that 
we regularly update the website — we’re going 


Russell, our Marketing Lead, has invested into 
memberships, events, awards, SEO, PPC, etc., 
in order to attract clients in the charity, 
not-for-profit and ethical business sectors. 

“We don’t creatively pitch for work, as 
anything you present before getting to know 
your client and their business needs would 
just be a ‘pretty picture’. Instead, we lead 
each pitch with our tailor-made strategy 
and impressive credentials.” 

Having the ability to choose which clients 
they take on hasn’t limited the breadth of 
accounts that Studio Republic have worked on, 
as Chris explains: “We're fortunate to choose 


“When Jack became Partner, Studio Republic really 


took off as an ethical creative digital agency” 


through another re-fresh as we speak. Our 
website should reflect who we are and what we 
can do, and that takes work. We treat ourselves 
as another one of our clients: we set a budget 
and assign time each month for that well- 
deserved TLC.” 

The channels that agencies use to gain their 
clients can often be diverse. “Over the years, 
we've been very lucky to receive the majority 
of our clients through referral,” Chris explains. 
“Each new project we launch acts as Studio 
Republic’s new ad campaign. This year, 
however, we’ve mixed things up, giving 
ourselves a marketing budget, which Dee 


the projects and clients we get involved with. 
We live by our values and are privileged to 
work with a wide range of clients who share 
our outlook.” 

Chris also shares: “There have been a few 
occasions where we have politely declined 
working for businesses simply because they 
don’t share our ethos. It’s not so much the size 
of a project that we decline, more the values of 
the people we'd be working with, or uncertainty 
that we can bring something to the party. We 
will only ever work on a project if we are 
certain that we can add value. We’re not an 
app, PR or media-buying agency, and we D> 
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It was vital that the 
website functionality 
worked flawlessly no 

matter what device 

was used to access 
the new service 


ms 


The priceometer is a 
fundamental component 
of the site, which Studio 
Republic built from scratch 


“Bmybilltair 


ismybillfair 


ismybillfair.com 


Each client requires their own targeted set of 
services. For ismybillfair, they needed innovation. 
Ismybillfair came to Studio Republic with a new 
business that was set to disrupt the price 
comparison market. There is significant price 
disparity for UK customers of utility and service 
providers, from energy to broadband. 

The founders saw this unfairness and wanted 
to challenge it, supporting people to remain with 
their providers whilst still getting the fairest 
price. The task was to brand the business (which 
only had a working title at the time) and build 
the UK’s first price transparency site offering 
users the opportunity to stay with their providers 
for a better deal. 

To achieve the client’s goals, the team needed 
to innovate and utilise new technologies as well 
as create a highly tailored site that would match 
the vision for ismybillfair. Everything was 
designed and developed bespoke for them. 

Studio Republic’s designers worked closely 
with the development team to carefully create 
and refine a bold, user-friendly site. The central 
journeys of the site — the pages which lead 
users to the ‘priceometer’ that tells them how 
much other customers with the same services 
are paying — were carefully designed and 
developed with ease of use in mind and 
were rigorously tested. 

The resulting site guides a user through a series 
of questions about their usage of various services 
(such as broadband, energy or mobile phones) 
and then presents them with an easy-to- 
understand priceometer, which shows whether 
what they are paying is high, low or average 
compared to other users with the same levels of 
service. Users are then offered a chance to ask 
their supplier for a better deal, or to see a range 
of alternative suppliers if they wish to switch. 
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A faster, highly 
responsive and 
more streamlined 
member journey 
was at the core 
of the redesign 


CIWEM 


Chartered Institution of Water and 


Environmental Management 
ciwem.org 


At the end of last year, the Chartered Institution 
of Water and Environmental Management 
(CIWEM) approached Studio Republic to pitch for 
their website redesign, and the agency jumped 
at the opportunity. Since refocusing their efforts 
at the end of 2014 to work only with clients that 
share their values, Studio Republic have wanted 
to work with an organisation that’s prioritising 
the environment. 

Since winning the pitch, Studio Republic have 
worked very closely with CIWEM, getting to 
know them and their organisation inside out, in 
order to pinpoint and understand the issues 
CIWEM’s website presented to their users as 
well as revealing opportunities within their 
business that could be developed or improved. 

As an international organisation with members 
in 89 countries and hopes to expand their 
member numbers, CIWEM required a site that 
drove membership and a simplified member 
journey, which was more user-friendly. Their 
original membership sign-up and journey were 
lengthy and complicated, and the Studio worked 
very closely with the team at CIWEM to 
streamline this process to make the user 
experience as easy and hassle-free as possible. 

CIWEM’s new site shows a simplified 
membership journey of just three steps (reduced 
from the original seven) and also enables users 
to save their application midway through and 
return at a later date to complete the process. 
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CIWEM Northern Ireland Howard Fox Technical Manager 


It was vital to understand the business in order to develop a 
new site that supported its membership. 


would never agree to take on services that are 
not our core specialism, but there are no digital 
projects that we can’t deliver.” 

As an agency that designs on an ethical 
basis, Web Designer asked Chris if there was 
one project that really encapsulated the ethos 
of his business: “The Green Party website 
would be one of the projects that best defines 
our purpose, capabilities and scalability,” Chris 
added. “They are the epitome of ethical and we 
really align with their values. The website we 
designed and built for them was independently 
ranked the winner of the 2017 general election; 
according to CBR, ‘The Green Party is the 
winner of the General Election, at least when 
it comes to digital performance’.” 

“From one single installation of the MODX 
CMS we built the main website and 180 local 
microsites through a control panel that gives 
200 users granular access levels. In the four 
weeks leading up to the General Election, the 
site received a huge amount of visibility 
achieving 823,000 visits.” 

Tools? Chris explains which tools Studio 
Republic favour for their work: “As with most 
agencies in the industry, we use a lot of Adobe 
software but, over the last few years, the 
market has become a lot more competitive, 
with a lot of other third-party software being 
launched — obviously an amazing thing for 
everyone in the industry! 

We use both Sketch and InVision for 
designing and prototyping on all of our digital 
projects. InVision seems to be going from 
strength to strength, with new tools, product 
launches and even documentaries coming out 


all the time. They’re a great resource for 
designers. Although we love the latest software, 
sometimes you can’t rule out good old- 
fashioned pen and paper. We tend to start a lot 
of our wireframes off on Post-it notes or in our 
notepads as it’s such a quick way of prioritising 
information and working things out.” 

Chris continues: “HTML5, CSS3 and JS are 
constantly evolving to provide us with new and 
interesting techniques to use on websites. 
Being able to utilise technologies such as CSS 
grid, WebGL, SVG animations and even HTML 
canvas elements creates unlimited possibilities. 
If we could have seen the way we build our 
websites now a few years back, our minds 
would have been blown. In such a fast-moving 
arena, it’s hard to predict where web 
technology will go — even in just a few years! 
What we do know, however, is that wherever 
it goes, and wherever it takes us, we will 
always look for the most innovative and 
creative applications. 

“As primarily MODX developers, we are 
always looking for new plugins and features for 
that framework. New features and extras are 
constantly being created and improved and, 
as we’re very active within the MODX 
community, we often suggest updates for 
the creators to implement. 

“And as well as keeping up-to-date with new 
technologies, we’re keen to roll up our sleeves 
and develop new tools ourselves. In an effort to 
balance our collaborative approach with clients 
and get rid of any bottlenecks in our planning, 
designing, building, managing and training 
processes, we’ve started using anew system > 


“HTML5, CSS3 and JS are constantly evolving to 
provide us with new and interesting techniques” 


Harley Southwick 
working on some 
interface design 
for a client project 
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Timeline 
2003 


After a stint as a drummer, Chris 
Todhunter decides development is 
his future and begins freelancing. 
Employees: 1 


2004 

Understanding that his business 
needs additional skills, Studio 
Republic hires a designer. 
Employees: 2 


2005 

Studio Republic move into a Winchester 
office to be closer to some bigger clients. 
Employees: 2 


2010 

In five years Studio Republic have 
outgrown their original office, moving 
into their new and current offices. 
Employees: 2 


2012 

A major milestone is reached for the 
ethical business with The Green Party 
becoming a client. 

Employees: 3 


2014 

A major step forward with the 
development of Studio Republic asa 
business is taken when Jack De Wolf joins 
the studio as Client Services Manager. 
Employees: 4 


2015 

Lead Designer Harley Southwick joins 
the team at Studio Republic. 
Employees: 5 


2017 

Studio Republic celebrate 
their 14th birthday. 
Employees: 8 


2018 

The team at Studio Republic continues 
to expand to meet the demands of 
their expanding client roster. 
Employees: 10 


Agency breakdown 
1x Head of Digital 


WS) OO 3x Developers 


©) 2x Designers 


§) 1x Digital Strategist 
1x Marketing Lead 
i) 1x Content Producer 


i 1x Client Services 
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A tight project development timeframe didn’t 
faze Studio Republic, who rose to the challenge of 
developing what has become a popular community 


BILSTON 


DARLASTON 


TIPTON 


DUDLEY 


Visitors are able to zoom into the incredibly detailed maps that OS is 
famous for in order to locate Photofit winners from any part of the country 
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The functionality 
of the Photofit 
project and its 
underlying 
infrastructure was 
paramount to 
ensure a flawless 
user experience 
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Ordnance Survey Photofit 


ordnancesurvey.co.uk/blog/tag/os-photofit 


Studio Republic been working with Ordnance 
Survey (OS) for a number of years now, creating 
engaging campaigns and related software that 
has always inspired large numbers of people 

to get involved. 

Ordnance Survey had an idea that needed to 
be delivered within a very tight timeframe. The 
project was Photofit, which aimed to encourage 
customers to engage more with the OS brand. 

Together, the Studio and OS developed a 
national online competition that enabled 
members of the public to upload their own 
photographs using the bespoke GeoTagging 
service we designed and developed specifically 
for them, as well as allowing users to vote for 
their favourite shot. The GeoTagging 
functionality enabled the winners from each 
region to be selected with ease, with the winning 
photographs being featured on the iconic 
Ordnance Survey paper maps. 

The Studio team had an extremely tight project 
timeline of just two months to build the interface, 
deliver complex functionality, and to fully test 
the site before it was launched. The tight-knit 
team pulled together to ensure the deadline was 
met and that the product the client received was 
exactly what they needed. 

Studio Republic didn’t stop there: Ordnance 
Survey had a scheduled appearance on The One 
Show, which they anticipated would lead toa 
high influx of traffic to the site, so they ensured 
that the infrastructure of the site would be 
robust enough to deal with high visitor numbers 
and content upload. 

The site received 15,000 hits and 700 uploads 
within 24 hours of going live, which it handled 
without a hitch. The campaign generated 471,000 
page views, 46,000 users, 11,480 entries, and 
59,889 votes cast. 


that we’ve designed and built as a plugin for 
our MODX CMS systems. 

“Now, when a client logs in, the first thing 
they see is a simple interface that shows 
exactly what’s in the pipeline, what’s 
completed, and what they can be getting on 
with. We introduce them to the system when 
the first templates have been signed off and 
built, which enables them to start using MODX 
a lot earlier, rather than having to learn 
everything just before the site goes live. In the 
not-too-distant future, we’re hoping to give this 
software away for free to help other developers 
in the MODX community and their clients.” 

The tools in use are not the core driver for 
how a design is approached and executed. “Our 
designs are always created with the primary 
users in mind — if mobile is the primary device 
used to access the site, we design mobile first. 
Responsive designs utilising a fluid layout are 
key for a consistent experience,” says Chris. 
“This has been important for some time but, 
with Google now indexing by mobile first, and 
with the way that people now consume the 
web, this has never been truer. With adaptive 
designs being less flexible and not allowing for 
scalability for all mobile screen sizes, we feel 


the extra effort given to designing and 
developing responsively always pays off for our 
clients and their end users. It just provides a 
more polished and engaging product. 
“We try to always have the end user in mind. 
The extensive initial research period that we 
undertake on all of our projects means that we 
can start to outline and analyse who will be 
using the website or service and how they'll be 
using it. From there, we plan how best to serve 
them the content they need. Working with a lot 
of charities means we’re constantly trying to 
improve and refine how people interact with 
online services — especially the way that they 
are able to make donations. Whilst a desktop 
screen provides loads of room to convey the 
impact of giving money, keeping the donation 
experience simple but informative on a mobile 
device is where the real challenge comes in.” 
Chris also explains Studio Republic’s 
approach to social media: “With billions of 
people using social media channels every day, 
it’s a vital way of driving traffic to a site. Use of 
social media is bespoke to the project; each 
channel obviously comes with differing 
audiences and varying ways for them to be 
targeted,” he says. “Our first step is always to 
work out who we want to attract and, from 
there, we identify the best way to engage with 
them. The great thing about being a full-service 
agency is that we can offer a wide range of 


solutions. Each of our campaigns take multi- 
faceted approaches with social media being 
one, among content creation, PPC, guest 
blogging and printed material.” 

The ethical stance the agency takes 
influences the people that want to work for the 
agency. Chris concludes: “Studio Republic is 
made up of the people that work within it. 
When looking for new team members, we look 
for passionate people who have researched 
and understood why Studio Republic exists. In 
applying for a role here, we hope that they’ve 
connected with our ethos and approach. We 
spend more time with our colleagues than we 
do our own families and, in a tight-knit team of 
like-minded individuals, it can be disastrous to 
get it wrong. Whilst skills are important, they 
can be learned and improved, so it’s the right 
personality and outlook that we try to find.” 

Studio Republic not only create sites that 
enables clients to make a positive impact, they 
craft digital spaces that speak to their own 
values, too. The close connection to these 
ideals colours every aspect of the striking 
work the agency has created over the last 15 
years. With their fingers on the pulse of what 
digital design means today, Studio Republic’s 
ethical compass ensures that their clients 
aren’t just clients, but partners who want to 
develop new digital spaces to improve the 
world that we live in. 


Ethical Design 
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Animation has become a key 
_component of a great web 

~ experience. Here we reveal 
essential advice from the pros, 
inspiration examples and how 
to get started with the 
popular web animation 
platform Greensock. It’s time 
to start tweening 


«a 


EXCITING TIMES AHEAD 


More tools and greater support 
means animation on the web is 
destined for greater things 


about time. Traditionally animated 
content is a snapshot of motion — 
you watch it and the content never 
changes. This is fine when the 


IT’S AN EXCITING TIME TO BE 
PART OF THE WEB ANIMATION 
community and there are now 
more tools than ever to help you 


~~" create your next engaging animation is designed to get 
animation or interactive project. across an idea or a concept. A 
And no matter what language you picture tells a thousand words and 
use (imperative, declarative, and a carefully crafted animation turns 
on), or what software you use those words into a meaningful 
to build your project there’s now story. But more and more it’s 
likely to be an animation library becoming important to design 
that is designed to work interactive, animated content as a 
specifically for that. You can even framework rather than as a linear 
output your video animations to experience. Our digital lives are 
SVG from After Effects now using fuelled by live data that constantly 
‘Lottie, enabling a whole new raft changes — interactive animations 
of animators to join the party. should be able to handle that data 
Animation for the web is now a and react and adapt in a functional 
first-class citizen and, frankly, it’s and aesthetically pleasing way. 
~~, 


Try something new 


Don’t get stuck using the same tools — try new animation 


frameworks especially if they have been built specifically for the 
kind of project you’re working on (React, Vue, and so on). It’s a great 
way to expand your skills, stay relevant and it encourage new ways 
of thinking about your approach to animation. 

This is not to say that you should keep up with every single new 
framework that comes out — that would be impossible, unnecessary 
and frankly ridiculous. Pick libraries and tools that will help you with 
your current project. You will learn how it works more easily if you 
have a real use case for it and know roughly what you need it to do. 
Working with new tools can also reshape how you think about the 
way you currently build and structure projects — they can also help 
you to understand more about the framework you're using. For 
example, animation tools designed specifically for React can really 
help you think in a more ‘React’ way. 


ANIMATE FOR THE WEB 


Always be a student. Remain humble and 

stay excited about learning. The more you 

know the more you'll realise that there is 
so much more fo learn. 


Chris Gannon 
Independent Interactive Designer, Web Animator and Illustrator 
gannon.tv  @chrisgannon 


Get hired to do what you love 

When prospective clients find your portfolio they'll often point to 
something you've already done and want that or a version of it. This 
means if you have a project in your portfolio you didn’t particularly 
enjoy you might be hired to do it again! So it makes sense to only 
put the work you want to get hired for in your portfolio. 

This is tricky when you’re starting out as you won’t have a huge 
backlog of work to choose from, so everything you’ve ever done 
tends to go in your portfolio. However, work in your portfolio doesn’t 
necessarily have to be client work. Instead create a fake brief of, say, 
a logo animation (maybe of a company you admire) and get on and 
make the best animation you can. Hopefully your passion and 
enthusiasm for the project will shine through in your work and when 
you post it on your portfolio and social media, @ that company, too. 
They may not want that particular animation, but they’ll see you're 
keen and talented and you'll be on their radar. 
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Look outwards 

Take inspiration from random 
and disparate sources. Avoid 
looking at your own industry 
for your next idea/inspiration 
(unless you are practicing a 
specific technique). Looking 
inwards means you just 
regurgitate the same ideas. 
Looking outwards makes you 
form unusual connections and 
keeps your brain on its toes. 


Have good taste 

The very best designers and 
developers have a great sense 
of quality, whether it’s 
regarding aesthetics, layout, 
functionality or code 
practices. And they devote 
their professional lives trying 
to attain or exceed their own 
tastes. In other words, if you 
have good taste, you'll 
produce great work. 
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Add your personality 
Adding your own personality 
to your work is crucial. 
Whether it’s visual puns, 
hidden meaning or quirky 
humour at the end of the day 
we are all humans and we all 
respond to human traits. 
Humour is important - it’ a 
universal language and is 
always appreciated pretty 
much everywhere. 


Ship it and share it 


Even if it’s just a silly little 
experiment or a technique 
you’ve practiced, finish it as 
best you can and share it. You 
can learn a huge amount from 
other people’s comments — 
and sometimes you just need 
to get some closure and move 
on. Often the thing you think 
isn’t that great is the thing that 
resonates most with others. 
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ABOVE Chris Gannon 
puts his own advice 
into action 


Practice, be excited 
then practice more 


No-one is born being good 

at anything - it takes years of 
practice and dedication to 
reach the level you want. And 
this level is only possible by 
staying excited and practicing. 
Practice doesn’t seem like 
practice if you're excited 
about what you’re learning. 


Looking inwards 
means you just 
regurgitate the 

same ideas. Looking 

~~-outwards makes 
you form unusual 
connections 


Sketch it 


Sketch your ideas out on 
paper, even if you’re a terrible 
artist. The simple act of 
drawing an idea on paper can 
help make that idea more of a 
reality. We all work in a virtual 
space so having a physical 
reminder of your idea can 
help you to stay focused and 
stop you from straying or 
getting distracted. 


Get started with the GreenSock 


Animation Platform (GSAP) 


GSAP is an industry standard for web-based animation 


and is used by millions of sites worldwide 


GreenSock Animation Platform 
(GSAP) enables you to animate 
anything you can access with 
JavaScript including DOM, Canvas 
and CSS, as well as your own 
custom objects. 

GSAP also helps resolve browser 
inconsistencies, enables you to 
use objects to manage complex 
animations, and runs up to 20 
times faster than jQuery. It has 
become a standard in the industry, 
and has been used in countless 
award-winning websites. 


1. Set up a basic HTML file. 

The best way to learn GSAP is to 
see it in action. In this tutorial you'll 
learn about the key features of the 
platform with working examples 
that you can put to use in your 
projects today! 

Get started by setting up a basic 
HTML file, where you can drop in 
your JavaScript code. Include an 
image with a ‘logo’ class. You'll use 
GSAP to animate properties to see 
how it works. 


2. Include GSAP Library 

Next, you’ll need to add GSAP to 
your web project. Between your 
<image> and <script> tags, insert a 
link to the GSAP library. You can 
download the ZIP directly from 
bit.ly/2Myg50OC, or grab it from 
GitHub at github.com/ 
greensock/GreenSock-JS. 

Files are also hosted on the 
superfast Cloudflare CDN, so the 
simplest way is to use the hosted 
files like this: 


3. Animate with tweening 
Tweening is the process of 
changing a value over time to 
create an animation. For example, 
moving an object from A to B, 
scaling it, or rotating it. You can 
also tween your own custom 
values, as you may need. 

The simplest way to tween a 
property is to use the ‘TweenMax. 
toQ’ function. This needs a target 
object, a duration and the 
property/value pairs you are 
animating. To see the function in 
action, try out each of the lines of 


code below using the ‘logo’ as the 
target object: 


4. Tween from and FromTo 

You can tween a property from its 
current value to a new one using 
‘toQ’, but you can also tween ‘from’ 
a value to its current value. 

For example, if your ‘logo’ is 
starting at x position ‘O’ and you 
want it to end there, you could do 
this: ‘TweenMax.from(“. 
logo”,2,{x:400); 

In this case, your logo will 
immediately move to x=400 and 
then tween to x=O. 

You can even define both the 
start and end values, ignoring the 
current values using ‘fromTo(’ like 
this: ‘TweenMax.fromTo(“. 
logo”,2,{x:400},{x:200));’ 


5. Easing 
‘Easing’ is the ‘style’ of animation, 
as values transition from A to B. 
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ANIMATE FOR THE WEB 


Instead of a constant rate of speed, 
which is called ‘linear’, you can 
apply functions to curve the rate 
of speed. Do they start slowly and 
gradually speed up? Do they come 
to an abrupt stop and bounce a 
little at the end? In animation these 
styles add character and emotion 
to your work. You can apply an 
‘easing’ function like this: 


6. Easing functions and In / Out 
GSAP includes a variety of ‘easing’ 
functions such as ‘back’, ‘bounce’, 
‘elastic’, ‘sin’, ‘circ’, and ‘expo’. You 
may have also noticed that the 
‘ease’ function has a property of 
‘easeln’, which we used in the step 
above. You can also use ‘easeOut’ 
and ‘easelnOut’. These indicate 
where the easing curve is applied 
in the animation. Try out the 
following to see the results: 


7. Delay a tween 

Sometimes you will want to delay 
the start of an animation, either 
to synchronise it with another 
animation, or to make it wait for 
an event to occur. You can use 
another one GSAP’s ‘special 
properties’ called ‘delay’ to do this. 
Try out the following code to see 
how you can delay tweens for 
specific timing: 


8. Callback functions 

To integrate animations with your 
code, it’s important to know when 
events occur, especially when an 
animation ends or begins. You can 
use the ‘onComplete’ event 
callback for this. You may want to 
know when a tween starts, using 
‘onStart’. And you may also want 


to sync your tween with another 
animation, or use the tween and 
its easing to update some other 
custom object. Use the ‘onUpdate’ 
callback for this. Here is how you 
use the callback: 


9. Callback parameters 

When firing callbacks you may 
want to pass information along 
with the callback to the function 
that handles it. You may need to 
pass information about the caller 
or specific values. This enables 
you to integrate your animations 
with the rest of your code base. 
All parameters are passed via 
‘callback+“Params”’, that is 
‘onUpdateParams’. 

In the following example, you 
can track progress of the tween 
using the keyword ‘{self} and can 
see how to pass multiple 
parameters using an array: 


10. Controlling animations 

OK, so you can now create tweens 
and ease the tweens, fire callbacks 
and parameters. But how do you 
control animations? Often you 
want to start or stop them based 
on other events. 

If you need to stop an animation 
you can use the ‘pause()’ method. 
If you want to resume a tween, use 
‘resume()’. To totally destroy a 
tween use ‘kill’. Try out the 
following and see what happens: 
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GreenSock Ease Visualizer 


easeOut 


RUN 


easelnCubic easeOutCubic easelnOutCubic easelnQuart 
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easelnQuint 


easeOutQuart easelnOutQuart 


easeOutQuint easelnOutQuint 
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easelnCirc 


easelnExpo easeOutExpo easelnOutExpo 


easeOutCirc easelnOutCirc 
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easelnElastic 


easelnBack easeOutBack easelnOutBack 


easeOutElastic easelnOutElastic easelnBounce easeOutBounce easelnOutBounce 


A et ee 


11. CSS and CSSPlugin 

The CSSPlugin (see ‘GreenSock 
plugins’ box on the opposite 
page) is included when you use 
‘TweenMax’. It is a huge time-saver, 
in that it normalises behaviours 
across browsers and auto-detects 
when it is needed for animations. 
CSSPlugin can handle colour 
tweens, SVG animations and 
optimised performance with 
caching and other internal tricks 


HTML 


ee 


EDIT ON 


C@DEPEN 


duration: 7.70 1 iteration 


totalDuration: 36.80 all iterations including repeatDelays 


repeat: 3 of 3 


time: 7.70 


totalTime: 36.80 
progress: 1.00 


order now 


- and it’s often more efficient to 
translate positions via CSS. 

You've already seen this in 
action when you used the ‘opacity’ 
and ‘position’ animations. It works 
without any special coding! 


12. 2D and 3D transforms 

CSS transformations enable you to 
scale, rotate translate and skew. 
They work in both 2D and 3D to 
create beautiful effects quickly. 
GSAP includes built-in ‘transform’ 
properties such as ‘x’, ’y’, rotation’, 
‘rotationX’, ‘rotationY’, ‘skewX’ and 
‘scale’. Try applying the following 
tween to your image instead of the 
ones we’ve already tried: 


totalProgress: 1.00 


13. Timelines 
Once you move beyond one or 
two tweens you may be 
wondering how to manage 
multiple animations. GSAP 
includes a ‘timeline’ object to do 
exactly that. You append tweens 
to the ‘timeline’ object and can use 
the ‘position’ parameter after the 
tween to time them. You can have 
tweens run one after another, or 
have gaps, or even overlap them. 
Add a couple more images to your 
HTML with classes ‘logo2’ and 
‘logo3’ respectively. 

To see how it works, try out the 
following ‘timeline’ code: 


14. Timeline control 

As well as controlling animations, 
you may want to control timelines, 
too. Luckily, you can pause, 
resume and reverse just like you 
can with animations. You can also 
add parameters to the timeline to 
‘repeat’, ‘yoyo’ and add callbacks 
for the entire timeline. You can 
also control a timeline’s speed 
using the ‘timeScale’ property. 
Try replacing your timeline 
declaration with the following 
code to see how it works: 


15. Get and set properties 

One feature that’s really useful is 
getting and setting properties of 
tweens and timelines. That way, 
you can get to know the overall 
progress and duration, or gather 
other information, about a GSAP 
object. In this code example you 
can ‘get’ the duration of the 
timeline, and then ‘set’ its duration 
to change it. This works the same 
for tweens as well. It’s another 
great way to react in real time to 
events, and modify animations on 
the fly. Add the following after 
your previous timeline code: 
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Move beyond one or 
two tweens you 
may be wondering 
how to manage 
multiple animations 


Greensock = 
plugins 


Plugins are special properties 
that get added to GSAP to 
extend the core functionality. 
This keeps the core JS small, 
but gives you the flexibility to 
add features you might need. 


CSSPlugin 


bit.ly/2BVacGm 

Enables you to animate 
almost any CSS property, 
including 2D and 3D 
transforms and colours. 


MorphSVGPlugin 
bit.ly/2Nr2NQ 

This plugin enables you to 
control tweens that morph 
SVG paths. This lets you 
morph one shape to another 
and much more! 


DrawSVGPlugin 


bit.ly/2MDYvsD 

Enables you to reveal or hide 
SVG strokes progressively, to 
create a ‘drawing’ animation 

of SVG paths. 


[query.g -gsap. is 


bit.ly/2Lylgsv 
If you're ee using jQuery 
in your project, this plugin will 
automatically take over the 
jQuery animations and 
improve performance. 


ANIMATE FOR THE WEB 


Animations have 
become a powerful tool 
for a number of 
reasons. They are 
important to grab the 
users attention whether 
it be to tell stories, 
guide users through a 
process or to simply 
make something look 
cool and engaging. 


Dan Heywood 
Designer / Front-end Developer 


www.supremo.co.uk 


Julia Muzafarova 


codepen.io/miocene/ 


Julia creates beautiful CSS 
animations and then shares 
them on Codepen. Her work 
is amazing and shows exactly 
what you can achieve just by 
using CSS keyframes. With 
over 100,000+ views on the 
pens, Julia’s work is definitely 
worth a follow. 


‘Ths piration- 


Brilliant examples of web animation today 


Nike React 


nike-react.com/ 

Here we have another 3D 
WebGL experience, created by 
Netherlands agency DPDK. 
This interactive site shows 

us what Nike’s new Reactor 
trainers feel like through 

the use of interesting 3D 
renders and smooth 
typographic animations. 
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Olaian — Lookbook Summer 


2018 Sy 
lookbook-olaian.fr/ 
This is a great example of cs 


what you can do to make ~~ 
static images much more 
interesting. Along with its 
subtle parallax and micro = 
animations, images are a 
treated with water distortion 
animations and transitions. 


ek an Ny 
DEVENS os 


> 


SS 
Foosball World Cup 18 ay 


bit.ly/2mdTc3e 

To celebrate the 2018 World 
Cup, Italian agency AQuest 
created this amazing 
interactive WebGL game. 
From 3D rendering to slick 
typographic animations, it’s 
a joy to play and showcases 
the power that modern 
browsers can accomplish. 


In Pieces 
species-in-pieces.com/ 
Created way back in 2015, In 
Pieces was one of the first 
projects that stood out for 
me. It grew by experimenting 
with CSS clip-paths and CSS 
transitions. Every one of the 
30 endangered animals you 
see is built with the same 30 
pieces as the last. 


~ Oat The Goat 
oatthegoat.co.nz/ 
This beautiful interactive story 
utilises HTML Canvas and the 
GreenSock animation library 
to create something special. 
Created by Assembly, the 
piece was part of a bullying 
prevention campaign 
launched by New Zealand’s 
Ministry of Education. 


UI Movement 


uimovement.com 

UI Movement is a community 
of design enthusiasts and 
developers, which focuses 
exclusively on web and 
mobile interfaces, and is 
where members share and 
discuss the interesting 
designs. A great source of 
animation inspiration. 
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Seven 
to follow 


Darin Senneff 
twitter.com/dsenneff 
Sharing how he builds his 
amazing animations with 
SVG and GreenSock, Darin 
is a must-follow. 


GreenSock 
twitter.com/greensock 
Talking of GreenSock, their 
Twitter is a great place for 
inspiring designs created 
with the GSAP library. 


Chris Gannon 
twitter.com/ChrisGannon 
Chris is another designer 
who shares great content 
on creating wonderful 
web animations. 


Green Chameleon 
twitter.com/CraftedbyGC 
A Bristol-based creative 
studio that often shares 
tasty animated designs. 


Val Head 


twitter.com/vlh 

Author of Designing 
Interface Animation, Val 
shares fun examples of 
simple to advanced 
web animations. 


Manoela Ilic (Mary 
Lou) 


twitter.com/crnacura 
One of the curators of 
Codrops, ML creates 
and shares her work, 
tutorials, and collections 
of web inspiration. 


Muzli 


twitter.com/usemuzli 
Providing quick access to 
all sorts of design, Muzil 
share lots of animated 
inspiration hourly. 
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Background slide show 
The image in the background isa 
transforming slideshow, with animated text 


Menu overlay 

The menu reveals an overlay witha 
glowing cloud that follows the user’s 
mouse around as they navigate the 


WELCOME 


The quick 
access menu 
The content for the 
page is available 
from this quick 
access menu, with 
each section being 
displayed as a point 
to orient the user. 
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options on the menu panel. 


DIEM 


CARPE 


. 


\Yescape the ordinary 


1 ’ \ DISCOVER STUNNING SUNRISE AND 
. 


SUNSET VIEWS 


+ 


yk direct GhEGK IN SOF NIGUTS 


Enjoy exclusive benefits \ Aug. 03,2018 [= —- 2 + 


Animated hint 

The user is prompted to scroll down with 
the animated mouse icon on the screen. 
The point inside the mouse moves up and 
down to show the page has scrolling. 


workshop 


BOOK NOW r 


for each slide explaining the breaks. 


Context information 
Information about the vacation 
breaks are located directly on the 
screen to enable the user to see 
options that are available. 


EXPERT ADVICE 


Shimmering image trends 
recent trend with having shaders 
r WebGL is that images are often 
und to shimmer on the screen. 
ion’t just add these because they a 
Ool effects, but add them becati 
adds meaning to the content. Hel 
the shimmering reflects the heat 61 
the water movement of the 


swimming pools. 


Creating cursor effects 


S DOWNLOAD TUTORIAL FILES www -ilesilo.co.uk/webdesigner 


Making the menu 


The menu of the Carpe Diem site features a glowing cloud that follows the 
mouse around and this connects the physical space of clear skies and light, 


<comment> | whispy clouds with the digital locations of the web presence. The movement 


What our 


experts think | following the mouse with easing gives subtle interest to the navigation. 
ofthe site | Mark Shufflebottom, Professor of interaction design 


Technique 


1. Create the menu 
The menu sits as an overlay on the page and has a 
glowing cloud follow the mouse around. Here is the page 
structure for the menu. Add as many list items as 
necessary for the left and right menus. 
<div class=”container”> 
<div id="glow’><img src=”img/cloud. 
png”></div> 
<div class="holder”> 
<div class="left”> 
<ul><li>LEFT Menu</1li> </ul> 
</div> 
<div class=”"right”> 
<ul><li>Right Menu</1i></ul> 
</div> 
</div> 
</div> 


2. Position the content 
Using either an external CSS document or style tags in 
the head, add the positioning code for the content. This 
displays the container as a grid element and enables 
the glow effect to be positioned absolutely so it can 
follow the mouse. 
.container { 
display: grid; 
width: 100%; 
height: 100@vh; } 
#glow { 
position: absolute; 
z-index: 1; } 


3.Menu elements 

The elements for the menu are placed in another grid 
over the top of the glowing cloud. It has two columns for 
he left and right menus. The menu items are in an 
unordered list, so the bullet point is removed. 

-holder { 


display: grid; 
Margin: auto auto; 
grid-template-columns: l1fr 1fr; 
width: 50%; 
z-index: 500; } 
ul { 
list-style-type: none; 
margin: Q; 
padding: 0; } 


4. Move the glow 

To make the glowing cloud follow the mouse, add in 
either an external JavaScript file or add script tags before 
the closing body tag. These variables control the 
movement and cache the ‘glow’ DIV in a variable. 

var speed = 12, _x =@, _y=0@, endX = @, 

endY = Q; 
var glow = document. getElementById(“glow”) ; 


5. Update positions 
Whenever the mouse moves within the document the 
following function is called. This updates the destination 
position that the glowing cloud is to move towards, and 
this is stored in ‘endX’ and ‘endY’: 
document.onmousemove = function(e) { 
endX = e.pagex; 
endY = e.pageY; } 


6. Make it move 
The last code is run every frame and updates the 
position of the glowing cloud. It moves it using an easing 
equation so that it slowly reaches the mouse position 
and eases into place. 
function animate() { 
requestAnimationFrame (animate) ; 
_Xx += (endX - _x) / speed; 
_y += (endY - _y) / speed; 
glow.style.top = _y - 33 + “px”; 
glow.style.left = _x - 33 + “px”; 
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In this fourth tutorial; you'll learn how to interact 
with 3D objects in WebGL using Threejs 4 
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ebGL 3D leverages the graphics 
pipeline, for highly optimised, 
interactive experiences. Near- 
universal browser and device 
support makes it a perfect approach for real-time 
rendering. No plugins are required and you can start 
learning these technologies right away. WebGL is based 
on the powerful OpenGL language. 

You can create complex models with high levels of 
detail, reflections, environment maps, and shadows. Users 
can interact with your experiences in real-time and in this 
tutorial you'll learn how to do just that! 

You'll be using the popular 3D library Three js to dive 
into creating scenes, and animating objects. Three js is 
free, open source and lightweight, and has been used by 
countless award-winning websites. Even Facebook 3D 
objects are also now powered by this 3D library, so youre 


in excellent company. 
Continuing from previous tutorials, you will move onto 
learning about interaction with objects in 3D space. You'll 
learn how to detect clicks (or touches on touchscreens) 
and mouse-over events. You'll learn about raycasting 
from 2D space to 3D space. You'll also learn some cool 
tricks for handling multiple objects and some maths to 
plot orbits. Other than having a JavaScript background, 
you can dive into this tutorial with no prior knowledge 
and get some great results. The goal is to demystify 3D 


web programming and get you inspired. 


1. Create a basic HTML file 
To get started, you need to set up a basic HTML file. 
You can setup external CSS and JavaScript files or 
include them inline for simplicity. Three js's ‘renderer’ 
class will create a <canvas> element for you. Add the 
following code to your ‘index.htm! file: 
<!DOCTYPE html> 
<html> 
<head> 
<style> 
html, body { margin: Q; 
padding:@; overflow: hidden; } 
</style> 
</head> 
<body> 
<script> 
</script> 
</body> 
</html> 


2. Include the Three.js library 

Include a link to the Threejs library in the head of your 

file, either hosted externally or download it from the 

Threejs repository. You can find the library and minified 

JavaScript at github.com/mrdoob/Three.js/, Note: The 

code in this tutorial has been tested on Three js v91. 
<script src=”libs/three.min.js”></script> 


3. Add global variables 


Between your script tags, add the following global 
variables to keep track of your mouse, raycaster and 
object collection. You'll use many objects in this tutorial, 
to help demonstrate the interactivity: 


// global vars 

var objects=[]; // collection of objects 
var num=20; // number of objects 

var raycaster = new THREE.Raycaster(); 
var mouse = new THREE. Vector2(); 


4. Create a3D scene 
You're going to add a basic 3D scene, which will be the 
container for your objects. The scene is the stage that 
will render with the camera. All 3D presentations will 
have a scene or stage in some form. What’s in that 
stage, and in view of the camera, is what the user will 
see. Add the following code to add a scene: 

// create a scene object 

var scene = new THREE. Scene(); 


5. Add a perspective camera 
Next, you need to add a camera. You'll use the 
perspective camera, meant for 3D scenes. The first 
attribute is the field of view of the camera. The second 
is the aspect ratio (width:height). Then you indicate the 
near-clipping plane and far-clipping plane distances, 
which define what is to be visible to the camera. You 
will also push the camera back in ‘Z’ space a little to 
make things easier to see. 

// create camera 

var camera = new THREE.PerspectiveCamera( 45, 

window. innerWidth/window. innerHeight, @.1, 

1000 ); 

camera.position.set(0.0,-1.0,10.0); 

camera. rotation. y=.5; 


6. Add a renderer and canvas 
The renderer handles the drawing of the objects in your 
scene that are visible to the camera. Set the ‘antialias’ 
property to ‘true’ to get smooth edges on our object. 
You can also define the size of the draw area to full 
screen. The renderer creates a ‘domElement’ - which is 
actually an HTML <canvas> element - that you can then 
append to the body. Optionally, you could specify an 
existing canvas element to draw to if you prefer, via 
the ‘canvas’ attribute of the renderer. 
// create renderer 
var renderer = new THREE.WebGLRenderer ({ 
antialias: true}) ; 
renderer.setPixelRatio( window. 
devicePixelRatio ); 
renderer.setSize( window.innerWidth, window. 
innerHeight ); document.body.appendChild( 
renderer.domElement ); 


7. Load the environment 
map and set ‘skybox’ 
Physical materials work best with environment maps 
applied. These maps are ‘skyboxes’ that surround the 
object so they can affect it from all directions accurately, 
impacting the colour and intensity of the colour on the 
surface texture. A great resource for cube maps can be 
found at humus.name/index. 
php?page=Textures. Add this code to load your 
map: 
// create environment map 
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var envMap = new THREE.CubeTextureLoader () 
.setPath( ‘assets/’) 

-load( [ ‘posx.jpg’, ‘negx.jpg’, ‘posy. jpg’, 
GNESYes) D2aes POS2 JS am aneez.qpen wll: 

// set as skybox 

scene.background = envMap; 

Note: The order of the cube map images is important, 
so follow that pattern when setting up your own. 


8. Create a loop for object creation 
You will be using a collection (array) of objects in this 
tutorial, to demonstrate the interactivity in a more 
dynamic way than using a single object. Set up a simple 
loop defined by the global ‘num’ variable that you 
created previously: 

// create collection of objects 

for (i=0;i<=num; it+){ 


} 
9. Create a 3D object 


Next, you need to create your object. Try using a sphere 
or another object you like. As with previous tutorials in 
this series, you use geometry and a material together to 
create a mesh, which can then be added to the scene. 
Add the following code inside your ‘for’ loop: 

// create new mesh 

var geometry = new THREE. SphereBufferGeometry( 
1,30,30 ); 

var material = new THREE.MeshPhysicalMaterial( 
{ envMap:envMap, metalness:1.0,roughness:0.0 
DS 

var object = new THREE.Mesh( geometry, 
material ); 


origin (0,0,0) es 


Yy 
10. Position the object randomly 
To spread the objects out in 3D space, you can apply 
random x, y and z position values. 3D co-ordinates have 
an origin of O,0,0. Objects placed there would be in the 
exact centre of the scene. To distribute evenly we want 
the randomness to range from -10 to 10 in each 
direction. Try this code: 


Refresher: Defining 
a 3D object mesh 


Remember, 3D objects meshes are like physical 


objects. They are comprised of a geometry and 
materials. Geometry defines the shape through 
vertices, faces, and so on. Materials are the ‘skin’ 
that textures the geometry. The mesh is the result 
of combining geometry and materials together. 
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// set random position 
object.position.set(Math.random() * 20. - 
10.0 , Math.random() * 20.0 - 10.0, Math. 
random() * 20.0 - 10.0 ); 


11. Calculate the 
distance from the origin 
To create some useful motion, you will create orbits 
in 3D space for each object. This will give them a 
predictable path to move around the scene over time. 
To do this we simply need a distance to store as a 
constant on our object. Using the origin and the 
random position you just set, it is easy to do this. 
Add this code next: 

// cale distance as constant and assign to 
object 

var a = new THREE.Vector3( @, 0, Q ); 

var b = object.position; 

var d = a.distanceTo( b ); 

object.distance = d; 


12. Define initial angles for orbits 
To create a simple orbit over time, you need a constant 
distance and an angle (in radians). You will set two 
starting angles for your orbits, to add randomness to 
your scene. The two angles will enable you to orbit in 
three dimensions. Add this code next: 

// define 2 random but constant angles in 

radians 

object.radians = Math.random()*36@ * Math. 

PI/180; // initial angle 

object.radians2 = Math.random()*36@ * Math. 

PI/180; // initial angle 


13. Add the object to 
the scene and array 
The last bit of code you need in the object creation loop 
is to add the object to the scene and to the array you 
created. This will enable you to easily iterate over the 
objects later for checking for interactions and for 
animation. Add this code next: 

// add object to scene 

scene.add( object ); 

// add to collection 

objects.push( object ); 


14. Render the scene for each 
‘requestAnimationFrame’ 
Next, you call the renderer's ‘render’ function inside a 
loop bound to the ‘requestAnimationFrame’ function. 
You also add a little rotation animation to the object to 
see it spin. Add this new code, and run your scene: 

// render the scene 


Object arrays 


It’s a great practice to start using arrays to manage 
collections of objects once you have more than one. 


Raycasting methods expect an array to check 
against. Animating and handling common functions 
are also advantages of using collections of objects. 


54 tutorial 


@ 


You can see your collection of spheres with environment 
map reflecting and as a skybox for your scene 


var animate = function () { 
requestAnimationFrame( animate ); 
for (i=0;i<=num; i++){ 
var o = objects[il]; 
3 
renderer.render(scene, camera); 
3; 


animate() ; 


15. Update object’s position 
Inside your ‘for’ loop, update the angle of rotation for 
your object, which will cause it to orbit around the origin 
over time. You can use some simple trigonometry to 
calculate the new positions using distance and angle (in 
radians). For variety you will orbit odd objects in one 
direction and even objects in the other. Add this code: 
if( i% 2 ==) { 
o.radians+=.01; 
o.radians2+=. 01; 
} else { 
o.radians-=.@1; 
o.radians2-=.@1; 
i 
o.position.x = (Math.cos(o.radians) * o. 
distance); 
o.position.z = (Math.sin(o.radians) * o. 
distance) ; 
o.position.y = (Math.sin(o.radians2) * o. 
distancex.5); 


16. Add a click event listener 
and handler function 
Interacting with 3D objects in WebGL requires a few 
steps. First, you need to add an event listener to the 
document of the WebGL canvas. Then you'll need to 
assign a handler function to it. Add the following code: 
document .addEventListener( ‘mousedown’ , 
onDocumentMouseDown, false ); 
function onDocumentMouseDown( event ) { 


} 


A ray or line is cast from the 2D space at the camera into 
3D space. If this intersects your objects you can detect it 


17. Get the mouse 
position and ray cast 
Next, you need to get the 2D position of the mouse. You 
set up a vector ‘2’ (x,y) to use for mouse position. You 
then need to translate this 2D position into 3D space by 
drawing a ray or line. You can also prevent the default 
click behaviour to better control the event in your own 
code. Add the following code in your event handler: 
event. preventDefault() ; 
mouse.x = ( event.clientX / renderer. 
domElement.clientWidth ) * 2 - 1; 
mouse.y = - ( event.clientY / renderer. 
domElement.clientHeight ) * 2 + 1; 
raycaster.setFromCamera( mouse, camera ); 


18. Check to see if the ray 
intersects with objects 
The raycaster’s ‘intersectObjects’ method returns an 
array of objects that it intersects. If it's empty, then 
nothing was intersected. Otherwise you have objects 
to check. The second parameter indicates it should 
also check nested objects. Add the following code in 
your event handler: 

var intersects = raycaster.intersectObjects( 
objects , true); 

if ( intersects.length > @ ) { 

3 
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Interactivity in 3D 


Screens on mobile and desktop 
are two dimensional. They have 
xandy axes. A first step in 3D 
interactions is to translate the 
2D co-ordinates of a touch or 
mouse position, into 3D space. 
This is done by casting a ray 
or line and capturing where it 
intersects with objects. Three. 
js has a ‘raycaster’ class that 
handles this and can return the 
array of objects intersected. 
You can analyse the intersected 
objects and react to the event. 
-1120,3997 ZS This can be triggered on clicks, 
WE WORLD REBUILDS touches, mouse movements or 
j other events. Dragging, which 
is a combination of clicking 
and moving a finger or mouse, 
is common as well. Also using 
accelerometer or gyroscope 
data makes for exciting 
interactions as well. 


Change the clicked- 
on object’s colour 
Now that you have a reference to an object that was 
clicked on, you can confirm that interaction visually, or 
handle it in any way that you need. Try chaining the 
colour of the object to a new random colour, so you can 
see it working. Try out this code inside your ‘if’ block: 


Mobile click-event handler 
Another essential interaction is capturing ‘touch’ events 
for mobile and touch screens. This works exactly like 
the ‘click’ event, but uses the ‘touches’ array. First, check 
for touches, then use the ‘targetTouches' array to grab 
‘pageX’ and ‘pageY’ values, which are similar to the 
‘mouse.clientX’ and “Y’ values. Add the following code 
to check it out: 


Turning the mouse cursor into a pointer when it’s over 
an object that can be clicked is a useful UI technique 


Add a mouse-over handler 
Another useful interaction is mouse movement, 
specifically mouse-over and mouse-out events. You can 
use a similar technique to the click-handler you just 
made, with a couple of small adjustments for mouse 
movement. Try this code out to make the cursor icon 
change to a ‘pointer’ when you mouse over an object: 


Applying your code to mobile and touch screens is 
straightforward once you have the basics down 
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It's time to get excited. Variable fonts allow you to load one font 
and manipulate it through CSS 


CSS FON’ FONTS 


’ Multiple styles from styles from just 
ONE TYPEFACE! 


This is a demonstration wa Vata ypc ‘Typeface. This is just one single typeface that means it makes one HTTP request on the server to 
ensure your page loads quickly. The biés are ll controlled by CSS to affect the different properties, allowing for some really unique styles. This is 
the defauW stying 8€the typelace, while the above shows some of the variations that can be achieved, 
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ypography on the web allows for graphic 
designers to be expressive with their 
client’s messages. The web has come a 
long way with typography, from only 
allowing fonts that are installed on the user's computer, 
to now having a whole raft of typefaces available from 
online content delivery networks. If you've ever used 
Google Fonts, then you might notice that when you add 
a number of weights for the same typeface, because 
you would like to use it in bold etc, then Google 
generally warns you that adding these makes the page 
slow to load. This problem is because a whole typeface 
of every single character has to be downloaded for each 
of those weights, regardless of whether you use all the 
characters. By contrast, a CSS variable font uses 
variables in the CSS to manipulate the font properties. 
This means that one variable font will have all weights, 
so as the designer you can become far more expressive 
in the way that you use typography in your design. | 
doesn't have to end there though, because some 
typefaces allow the designer to alter more than just the 
weight of the typeface, and as such a great deal of 
flexibility can occur. We are using the open source 
Amstelvar font, which has no less than 17 variables 
associated with it, so that you can get some really 
interesting options from just one typeface. 


1. Opening the project 
Open the ‘start’ folder in your code IDE and open ‘index. 
html’ for editing. In the body section of the page, add 
the code below to give some structure and content for 
us to work with using the CSS variable fonts. You can 
change the text to suit your own needs. 

<div class="featured"> 


<div class="featuredInner"> 

<h1>Variable</h1> 

<h2 class="subhead”>CSS FONTS</ 
h2> 

<h2 class="kicker”>Multiple 
styles from just </h2> 

<h2 class="base”">ONE TYPEFACE! </ 
h2> 


2. Finish the content 
Now add the remaining code shown below. In our 
example we have a larger paragraph than shown here 
in order to allow you a description of CSS variable fonts 
in the example. You can copy that text from the finished 
folder or add your own as necessary. 

<p class="desc">Add a paragraph 
description here.</p> 

</div> 

</div> 


3. Link up the style 
All of the CSS is going to be placed in its own separate 
file in the ‘CSS’ folder. As such the link to this is placed 
anywhere in the ‘head’ section of the code on the page. 
Save the ‘index.html’ page now as you are done with 
this and all further code will be in CSS. 

<link rel="stylesheet” href="css/design.css"> 
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is is a demonstration of the Amstelvar Variable Typeface. This is just one single typeface that means it makes one HTTP request on the server to ensure your page loads quickly. The variables are all controlled by 
bllowing for some really unique styles. This is the default stying of the typeface, while the above shows some of the variations that can be achieved. 


4. Loading the typeface 


From the ‘CSS’ folder, open ‘design.css’, which will be 
empty. Add the code as shown here at the top of your 
CSS. As you can see this is identical to how you would 
load any locally stored typeface with current CSS. 
@font-face { 
font-family: Amstelvar; 
sre: url(../fonts/AmstelvarAlpha-VF . ttf) ; 
3 


5. Styling the page 
Now the HTML and body of the page are styled with 
the margin and padding removed. The font that was 
loaded in the previous step is now applied as the 
default font to all text on the page. A background image 
is added to cover the background and the text is set to 
white with a slight shadow to help it stand out. 
html,body { 
width: 100%; 
margin: Q; 
padding: Q; 
font-family: Amstelvar; 
background: url(../img/bg. jpg) no-repeat 
center center fixed; 
background-size: cover; 
color: #fff; 
text-shadow: @px 3px 5px rgba(@, 2, Q, 
0.4); 
3 


6. Centring the text 


The easiest way to centre text both horizontally and 
vertically is to use the newer CSS grid as the display 
object. This wrapper, which encapsulates all other tags, 
is set to take 100% of the vertical height with the 
‘vh’ property. 
.featured { 

width: 100%; 

height: 10Qvh; 

display: grid; 
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7. Auto centre 
Now the content inside can make use of the auto for 
both the margin at the top and bottom as well as left 
and right. This means we get a text box that is going to 
take 60% of the screen and centre it. The text is also 
centred and this will help. As you can see in the browser 
the variable font is applied as any normal font. 
.featuredInner { 
margin: auto auto; 
text-align: center; 
width: 60%; 
3 


8. Varying the font 
Now the font for heading 1 is going to be given some 
varying properties. The W3C would like us to use 
font-weight, stretch and optical sizing, but for this 
typeface the optical sizing doesn’t work. We'll work 
around that in the next step but just check your 
progress in the browser. 
hl { 
font-size: 10vw; 
line-height: Q.1; 


The 'vh' property 


When using 'vh’, 100 refers to the height of the 


display window. The same principle applies to 
width, 'vw'. This will give the viewport width and 
will scale according to those width and heights. 
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The second line is styled up, and as you can see here the 
typeface looks very different, despite being the same font 


Variable 
CSS FONTS 


Multiple styles from just 


Once the third line is in, the variety of variables for the 
Amstelvar font makes for differing possibilities 


Variable 
CSS FONTS 


Multiple styles from just 
ONE TYPEFACE! 


The final large line of text looks very different from the 
others. This could be mistaken for a different typeface 


Reduced line height 


You may wonder why the line height is reduced for 


most of the typography. This is simply to make the 
text fit closer together and not have large gaps 
between the lines of type for the headings. 
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font-weight: 550; 

font-stretch: 100; 

font-optical-sizing: 24; 
3 


9. Customising the font 
The Amstelvar font has so many variables that aren't 
controlled by W3C commands, but there is a way to 
access them. Add this line of code that also adds the 
height of the y-ascender to 700 and the height of the 
y-upper case. In both instances, they are reduced 
making the type have a reduced overall height. 
font-variation-settings: "wght” 550, "wdth” 
100, "opsz” 24, "YTAS" 700, "YTUC” 720; 


10. Subtle changes 
Now the styling of the subhead will be added. As you 
look at this you will see that the weight has been 
reduced as well as the optical sizing. When you look at 
this in the browser it almost looks like a completely 
different typeface given the characteristics have 
changed so much. 
.subhead { 
font-size: 7w; 
letter-spacing: .03em; 
line-height: Q.2; 
font-variation-settings: "wght” 100, 
"wdth” 100, "opsz"” 20, "YTUC” 70Q; 
i) 


11. Creating a separator 
Now a double line separator will be added between the 
text. This will only be 40% wide, so slightly less than the 
text. This is also given a slight shadow behind it. This is 
just to help aesthetically add a break between the first 
two lines and the second two lines. 
.kicker::before { 
content: ""; 
display: block; 
margin: -4% auto Q%; 
width: 40%; 
border-bottom: 8px double #fff; 
box-shadow: Qpx 3px 5px rgba(@, 2, 2Q, 
@.4); 
i 


12. The next line 
The next styling is added to help make a difference in 
the text. As it stands now it doesn't look too different to 
anything done in the previous step, but in the next few 
steps more variables will be added to enhance the way 
this looks with some subtle changes. 
-kicker { 
font-size: 3.3vw; 
line-height: 1.5; 
font-variation-settings: "wght” 156, 
*wdth" 10@,, “opsz” 32, "YTUC™” 795: 
a; 


13. More variables 
The new variables are marked in bold below. XOPQ is 
the x width of the letter, XTRA is the width of the curve. 


YOPQ is the y height of the letter, YTLC is the y height 
of lower case letters. YTSE is the serif height, GRAD is 
the grading of the letter. YTAS and YTDE is both the 
ascender and descender y height. 
.kicker { 

font-size: 3.3vw; 

line-height: 1.5; 

font-variation-settings: "wght”" 156, 
"wdth" 100, "“opsz” 32, "XOPQ” 117, "XTRA” 4@2, 
"YOPQ” 45, "YTLC” 600, "YTSE” 9.5, "GRAD" 90, 
“YTAS! 75050 VIDE? 250). ANG! 795. 
3 


14. Yet more variables 
The last few variables shown here in bold are the overall 
y-height of the letter with the YTRA property and then 
the paragraph weight and paragraph width. Save this 
and refresh your browser to see the changes take hold. 
The changes are subtle, but enough to make it look like 
a different typeface. 
.kicker { 
font-size: 3.3vw; 
line-height: 1.5; 
font-variation-settings: "wght” 156, 
"wdth” 100, “opsz” 32, "XOPQ” 117, "XTRA" 402, 
"YOPQ” 45, "YTLC” 600, "YTSE” 9.5, "GRAD" 90, 
NIAS: 950, “VIDE 250, NIUE 795, - YTRA: 
900, "PWGT” 92, "PWDT” 402; 
3 


15. All change 


The next line of text is styled up with this CSS now. 
Again the settings are being adjusted to give the 
appearance of a different typeface. Save this and look at 
the effect that has been generated in the browser. The 
payoff here is that you have only made one HTTP 
request for the typeface but generated a different style. 
.base { 
margin-top: -2.5%; 
font-size: 4vw; 
line-height: 2.1; 
font-variation-settings: "wght” 156, 
"wdth” 100, "opsz” 32, "XOPQ” 247, "XTRA" 402, 
"YOPQ” 45, "YTLC” 600, "YTSE” 9.5, "GRAD" 90, 
UYITIASE 7/50 wVIDEA 250" NG 795) eV RAL 
900, "PWGT” 92, "PWDT” 402; 
3 


16. Last text 
The final section of text is being left in the default 
setting for the Amstelvar font. All that is going to 
happen here is that the line height is adjusted to make it 
much more readable on the screen. This completes the 
styling of all the text. Next is to show how to animate 
some of the properties. 

.desc { 

line-height: 1.8; 
U: 


17. Making it animate 
Let's revisit the initial heading tag and add some 
animation to that. In order to do that, add in the code 
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Para Width: 


Amstelvar is an exercise in variable 
weight, contrast, and proportions. Positive 
and negative forms can be manipulated as 
separate axes, as well as a large array of 

other variables. It is an experimental work 


in progress so can produce unusual 
results. 


David Berlow 


East Asian (limited) 


Amstelvar Exploring font 
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Here you will see many 
fonts that range from fully 
paid commercial fonts 

to open source variable 
fonts that are available to 
download from github. 
com. Amstelvar is open 
source but also has one 
of the widest selections 
of variables. You will see 
that most fonts only have 
the weight property, but 
that alone will still save 


Selawik Variations 


a | 


A demonstration font with special 
debugging glyphs for testing support of 
various variable font features and 
providing readouts of current settings, 


~ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefgh 
noparstuvwxyz 0123456789 |o+0.0000 


linking to many fonts on 
Google Fonts. When you 
have manipulated the 
font to get the desired 
results, you can take those 
settings into your CSS. 


shown in bold. The animation name refers to the 
keyframes that will be defined in the next step. It will 
take four seconds and hold on the last keyframe. 
hl { 
font-size: 10vw; 
line-height: Q.1; 
animation-name: anim; 
animation-duration: 4s; 
animation-fill-mode: forwards; 
font-variation-settings: "wght" 550, 
"wdth” 100, "opsz” 24, "YTAS” 700, "YTUC” 720; 
a 


18. Defining the start 


The keyframes for the ‘anim’ are created. Here 
the starting keyframes are added. The weight of the 
typeface is changed to its lowest value of 1OO and 
the paragraph weight is changed to O so that it 
becomes bolder as it animates over the duration of 
the four seconds. 
@keyframes anim { 

from { 

font-variation-settings: "wght” 100, 
"PWGT” Q; 
3 


19. Ending point 
The keyframes are animated from one point to another 
in this example. The final ending point of those 
keyframes is defined, which as you can see takes it back 
to the default paragraph weight and the weight of the 
typeface is set to how it was originally defined earlier in 
the tutorial. Test this in the browser. 

OME 

font-variation-settings: "wght” 550, 
"PWGT” 100; ses}, 


20. Refining the animation 

When you test the animation, you will see that it is a 
little jittery because of the extreme change in the 
paragraph width. Here this is changed to 50 and the 
opacity is changed to O so that it fades in and makes 
the transition smoother. 


21. Finishing off 

The final amendment is to add the opacity of 1 so that it 
fades in. Refresh the browser and this works much 
smoother. Experiment by animating any of the 
properties over time and you will get some interesting 
results for your type. And this is all from one typeface! 


@keyframes anim { Or 1 
from { font-variation-settings: "wght" 550, 
font-variation-settings: "wght” 100, "PWGT" 100; 
"PWGT” 50; opacity: 1; 
opacity: Q; 3 
} } 


CSS FONTS 
Multiple styles from just 
ONE TYPEFACE! 


This is a demonstration of the Amsielvar Variable Typeface. This is just one single typeface that means it makes one HTTP request on the server to 


ensure your page loads quickly. The variables are all controlled by CSS to affect the different properties, allowing for some really unique styles. This is 
your page loads quickly. prope! wing ly unique sty! 
the default stying 6f the typeface, while the above shows some of the variations that can be achieved. 


With the design in place, the first line is animated so that its variable font properties 
animate into position, while fading onto the screen 
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tutorial 


Cool Trainers 


Stand out from the crowd in our superb footwear 
for a multitude of sports and activities including 
running, football etc! 


3° 


OWNLOAD TUTORIAL FILES 
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nimations, and movement in general, 
have come a long way in terms of web 
design. Animations that were once 
limited to GIFs, JavaScript and Flash 
designs are now possible with CSS3. This helps 


designers and developers build unique elements while 
cutting down on clutter and page speed. 

That being said, there are a number of things to 
understand regarding CSS3 animations and their use. 
With a little bit of knowledge, however, you can use 
properly placed animations to encourage user 
interaction and direct the user flow. Understanding the 
user experience too is vital in today’s industry and 
having confusing, slow and pointless Ul animations, is 
not a good idea just because we can! 

So in this tutorial, we will look at how we can build a 
simple UI animation that we could use for a fashion 
brand for an eCommerce store. We will be giving the 
user a nice pleasant design with a nice large image and 
animated transitions that happen on the click of a 
button. We'll be using HTML, Sass (scss) and a touch of 
vanilla JavaScript that uses the ES6 syntax. To make 
things easier for us, we will develop this project within 
CodePen (https://codepen.io). If not then you can use 
your own local setup. 

However, we will be using Sass, so if you want to 
follow along to everything without using CodePen, then 
you'll need Sass installed and running before we can get 
the ball rolling. 


1. Getting set up 

The very first thing you need to do (after you've 
opened up your code editor) is to create or find an 
image that you can use for the animated section. What 
we will do is use a transparent .png image so we can 
create a nice animation effect when the read more 
button is clicked. 


2. Get started with the HTML 


Create a new ‘index.html’ file and open it up in your 
code editor. All of our HTML will be within a wrapping 
element, which we will call ‘container’. Then the 
left-sided content will be added next and will include a 
title, some text and a ‘read more’ link which we will end 
up styling as a button. 
<div class=”container”> 
<div class="item has-content”> 
<div class="item inner”> 
<h2 class=”section-title”><span>Cool 
Trainers</span></h2> 
<div class=”outer-content”> 
<p>text goes here....</p> 
</div> 
<p class=”more-btn”>Read More</p> 
</div> 
</div> 
</div> 


3. Right-sided HTML 

The right-sided content will contain our image and 
some text, which we will hide on default and then reveal 
once the animation has occurred. The image we're 


using has a transparent background and is at a size of 
400 x 500 pixels. 
<div class=”"item has-img”> 
<div class=’display”> 
<figure class=”trainers”> 
<img src=”"https://image.ibb.co/ 
dDAeDz/trainers.png” alt=””> 
</figure> 
</div> 
<div class=”img-content”> 
<div class=” img-content_inner”> 
<p>Lorem ipsum. ..</p> 
<p>Lorem ipsum. ..</p> 
</div> 
</div> 
<div class=”"bg”></div> 
</div> 


4. Sass variables 
To help us stay tidy within our CSS code, we will make 
use of Sass variables. So if you're using CodePen, make 
sure the CSS section is set to SCSS and at the very top 
of our CSS we will add three variables: one for our 
primary colour, font family and easing values that we 
will use for animations. 

$blue: #8dc3e2; 

$mainFont: “Lato”, sans-serif; 

$easing: cubic-bezier(@.68, @.11, 0.66, @.27); 


5. Body and title 


The main body text will be the same throughout the 
page, So we can make use of our Sass variable 
‘$¢mainFont’ and set the line height and some margin 
at the top. The title will be positioned slightly off 
centre, and we can do this by using the ‘translatex’ 
property. We also want the title to animate into a 
different position once the learn more button is clicked, 
so we will add a transition. 
body { 
font-family: $mainFont; 
line-height: 1.6; 
margin-top: 3em; } 
her 
font-size: 3em; 
margin: Q; 
text-align: left; 
position: relative; 
transform: translateX(50%) ; 
transition: all 50@@ms ease; } 


6. Centring 
Using our container element, we are able to position 
everything to the centre of the page. We will then use 
flex to align centre all our elements together. Doing this 
will now place our main content underneath our image, 
ready for us to hide and reveal in a later step. 
.item-inner { 
position: relative; 
right: Qem; 
ij 
.container { 
max-width: 90Qpx; 
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margin: auto; 
display: flex; 
align-items: center; } 


7. Introduce items 
The two main elements that hold both sets of content 
are given a class name of ‘item’ and we want to give 
these some width and padding. Also, we need to make 
sure the <figure> element that holds our main image, 
doesn't have any margin. 
-item { 
width: 40%; 
padding: 6em @em; } 


figure { 
margin: Q; } 
8. Hide the title 


To give us some extra animation and slickness to our 
element, the section title that is shown on the left side 
will first be hidden, and when the page loads it will 
animate up into view. So using ‘translateY¥(100%)' and 
‘overflow: hidden’, we can move this out of view until the 
page loads (which we will do in a later step). 
.has-content { 
position: relative; 
z-index: 4; } 
.section-title { 
overflow: hidden; 
position: relative; 
margin: Q; 
span { 
display: inline-block; 
transform: translateY (100%) ; 
position: relative; 


Cool Trainers. 
sand od rome ero super tne fora mute of aparece cng ing ott! 
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Using cubic-bezier 


Using cubic-bezier (x1, y1, x2, y2) will allow you to 


define points in the curve of your animations that 
will give you more control. 
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transition: transform 40@ms ease-in-out; 


ad 


9. Left content and More button 


What we did with the section title, we will also do to the 
left content text. So this will animate into view once the 
page is loaded/refreshed. The read more button will be 
given some styling so it actually looks like a button. You 
can give it some fancy over effect if you want, but we 
think it’s nice without. 
.outer-content { 
overflow: hidden; 
position: relative; 
pf 
position: relative; 
opacity: Q; 
transition: all 50@ms ease; 
transform: translateY(30%); } } 
-more-btn { 
cursor: pointer; 
display: inline-block; 
color: #999; 
text-decoration: none; 
border: 1px solid #ddd; 
padding: 15px; } 


10. Right side 


The right-side content will obviously have our main 
image and some text. We will give this some width of 
60% but then the main background of our image - 
which will be blue - has no width to it but is positioned 
top left. However, we can now manipulate this and 
animate it on both page load and when the learn more 
button is clicked. 
-main-img { 
width: 60%; 
position: relative; } 
-bg { 
position: absolute; 
top: Q; 
left: Q; 
width: 0%; 
height: 100%; 
background: $blue; 
transition: all 60@ms $easing; } 


11. Hidden trainers 
Again like we did in the last few steps, we will hide the 
main image (trainers) as we also want this to animate 
into view on page load. This is all achieved by using 
the ‘transform:translateY’ property and setting the 
opacity to Zero. 
.display { 

display: flex; 

max-width: 62%; 

margin: auto; 

position: relative; 

z-index: 6; } 


.trainers { 
width: 100%; 
img { 


width: 100%; 
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transform: translateY(2@px) ; 
transition: all 50@ms ease-in-out; 
opacity: @; } } 


12. Page load transitions 
To get some nice animated transitions we will make 
good use of the transition delay property. This will 
allow us to have greater control of when certain 
elements will animate into view, and you can play 
around with the values to see if you can create 
something slightly different. 
// on load transitions 
.load-page { 
DES 
width: 100%; 
transition-delay: 30Qms; iY 
.section-title { 
span { 
transition-delay: 60Qms; 
transform: translateY (0%) ; oe; 
.outer-content { 
p{ 
opacity: 1; 
transition-delay: 1000ms; 
transform: translateY(Q%) ; 
age 
-more-btn { 
opacity: 1; 
transition-delay: 1200ms; 
transform: translateY (0%) ; 3 
.trainers { 
img { 
transition-delay: 60Qms; 
transform: translateY(@px); 
opacity: 1; 
yoo 


13. Adding the JavaScript 


Now with all this talk of transitions when the page loads, 


at this point we can't see this happening because we 
need to control this with a touch of vanilla JavaScript. 
So in the JS section in CodePen (or using a external 
script file) we're going to begin by adding in some 
constant variables. 

const body = document.body; 

const button = document.querySelector(“. 

more-btn”) ; 


14. Load page 

Now that we have the document body element, which 
is stored in the ‘const’ variable ‘body’, we can now use 
that to add a class called ‘load-page’ to the body when 
the ‘loadPage(’ function gets invoked (at the end of the 
script). We've also used an arrow function here to keep 
things nice and tidy. 

const loadPage = () => { 

body. classList.add(“load-page”) ; 
3 


15. Reveal content 
Even though we haven't created it yet, we will have a 
click event on the ‘learn more’ button, which will invoke 


a function called ‘initReading’. This will toggle a class 
(which we haven't written yet) on the body called 
‘is-reading’ that will reveal our content using transitions. 
Also we will store this event in a parameter called ‘e’ and 
then store the event target inside a variable called ‘txt’. 
const initReading = e => { 
let txt = e.target; 
body. classList.toggle(“is-reading”) ; 
ob 


16. Changing button text 
Now inside the ‘initReading’ function we can use an ‘if’ 
and ‘else’ statement to check whether or not the body 
contains a class called ‘is-reading’, and if it does, set the 
text of our read more button to ‘show image’ or else, set 
it to ‘read more’ - which will be our default state. 
if (body.classList.contains(“is-reading”)) { 
txt.innerHTML = “Show Image”; 
} else { 
txt.innerHTML = “Read More”; 
a us 


17. Page load 
Outside and below the ‘initReading’ function, we can 
add the event listener to the read more button and fire 
off the ‘initReading’ function when the click event 
happens. Lastly we will use the ‘window.onload’ function 
and set that equal to our ‘loadPage’ function - this will 
execute as soon as the browser window is loaded up. 
button. addEventListener(“click”, initReading) ; 
window. onload = loadPage; 


18. Image content 
Back in our CSS, we will create some default styles to 
the text that will appear once the trainer’s image has 
animated off. We want this text to be positioned at the 
centre of our content area and we can achieve this by 
using ‘transform: translate-5O%). Then we will set the 
visibility of this to ‘hidden’ so we can reveal it in a later 
step together with some animation. 
.is-img--content { 
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position: absolute; 

top: 50%; 

transform: translateY(-50%) ; 
z-index: 5; 

visibility: hidden; } 


19. Paragraph animations 
When the content area is made visible and the main 
image has animated off, we want the text to animate up 
and into view. However, at this point, we will set the 
opacity to zero and then in a later step we will set it 
back to one, which will give us a nice transition. 
.is-img--content_inner { 
padding: Qem lem; 
pet 
transform: translateY(6Qpx) ; 
position: relative; 


opacity: Q; 
transition: all 50@ms ease; 
dp a) 


20. Finishing up 

There's quite a lot going on in this last piece of CSS and 

it will glue everything together. The delay in transitions 

gives us a lot of control of how our elements appear, 

and the main one to take notice of is the ‘is-img-- 

content’ rule where we set the visibility back to visible. 
.is-reading { 


.bg { 
width: Q%; 
left: auto; 
right: Q; 


transition-delay: 40@ms; } 
h2 { 
font-size: 2.3em; 
margin: Q; 
position: relative; 
transform: translateXx(Q); 
transition-delay: 30Qms; 
transition: all 40@ms ease; } 
.trainers { 
img { 
transition-delay: QQms; 
transform: translateY(2Qpx) ; 
opacity: Q; 
visibility: hidden; } } 
.is-img--content { 
visibility: visible; } 
.is-img--content_inner { 
padding: Qem lem; 
pf{ 
transform: translateY(@px) ; 
position: relative; 
opacity: 1; 
transition-delay: 8Qms; 


&:nth-child(2) { 
transition-delay: 90Qms; 


tps we as 


21. Reactive animations 


As you've seen from following along to this tutorial, Ul 
animations are pretty easy to create just from using CSS 


and a touch of JavaScript. There's two types of UI 


Using ES6 syntax 


JavaScript is everywhere these days and it’s a 
skillset that most (if not all) front-end developers 
should at least know the basics of. As we all 
know, JavaScript was given a significant update 
from ES5 to ES6. Throughout this tutorial we 
used the ES6 syntax for the little bit of JavaScript 
we wrote. So in case you haven’t learned the 
basics of ES6, then what we did might have 
been a bit confusing to you, so let’s clear a few 
things up. 
Arrow Functions 
const loadPage = () => { 
body. classList.add(“load-page”) ; 
de 3 
Arrow functions are a more concise syntax for 
writing our functions and happen to be the 
most used feature of ES6. They are one-line mini 
anonymous functions and help keep our code 
tidy. One of the features of arrow functions is 
when you only have one parameter to pass in, 
such as the event (e), then you don’t actually 
have to use the parenthesis. 
const initReading = e => { 
let txt = e.target; 
body. classList.toggle(“is-reading”) ; 
3; 
Const and Let 
These are two new ways of declaring variables. 
Let is block scoped, meaning it is only available 
to use within the block of code it is in. Variables 
declared with const are also block scoped but 
cannot be re-declared. 


animations: static or reactive. What we've done is a 
reactive UI animation as it’s based on an event that 
riggers the animation, and these can create a truly 
interactive user experience. 


1m the crowd in our superb footwear 
fe of sports and activities including 
football etc! 
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Create an animated 
wavy line effect 


Inspired by www.decathlon-united.com/en/chapters 


Logo’s placement Home return arrow 

The brand logo is placed in the top-left Allows the user to return to the home page of 
corner of the web page - allowing users to the website. An arrow pointing in this direction 
return to the menu from any selected page. is understood to mean ‘go back’. 


Menu text 
Hovering over the 
menu options 
triggers movement 
of the grey line to the 
location of the menu 
item as part of the 
animation effect. We do things we love 


We love sports 


We dare 


are Decathlon United 
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Wavy line 

This line becomes an 
animated wave pattern that 
provides a response to the 
user’s mouse movement 
interactions with the page. 


Background image 
The background image also 
responds to the user’s mouse 
interactions, moving in the 
opposite direction to provide 
asense of depth. 


ay wv 
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<comment> 


What our 
experts think 
of the site 


Illusion is a matter of perspective 

The trick for finding simple answers to complicated problems can often be 
found through looking at the details with a different perspective. In this 
case, the illusion of wavy lines was simplified by looking for CSS features 


that include curves that can be presented with the required ‘wonkiness’ 
Leon Brown, developer and author of e-learning content at nextpoint.co.uk 


Create an animated wavy line effect 
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Technique 


1. Document initiation 
The first step is to initiate the HTML document. This is the 
HTML consisting of the document container used to 
store the head and body sections. While the head section 
is used to reference the external CSS stylesheet, the body 
section is used to store content created in step 2. 
<!DOCTYPE html> 
<html> 
<head> 
<title>Wavy Line</title> 
<link rel="stylesheet” type="text/ 
css” href=”"styles.css” /> 
</head> 
<body> 
xxx STEP 2 HERE 
</body> 
</html> 


2. HTML content elements 


The HTML content consists as a navigation container 
that stores two span elements. The first span will be used 
for the wavy line effect, while the second span is used to 
contain the list of links to be made visible. 


<nav> 
<span></span> 
<span> 
<a href="#’>One</a> 
<a href="#’>Two</a> 
<a href="#”>Three</a> 
</span> 
</nav> 
3. Initiate the CSS 


Create a new file called ‘styles.css’. The first step of this file 
initiates the presentation of the main document 
containers - ie its HTML and body. These are defined to 
cover the full screen with a black background without 
border spacing. 
html, body { 

display: block; 

height: 100%; 

background: #000; 

padding: Q; 

margin: Q; 

font-family: serif; 


i 


4. Navigation container 


The navigation container is set to display at a specific size 


and with overflow set to hidden. This is important for the 
effect to work, as the wavy line is an illusion created from 
only part of the spinning box being visible. 
nav{ 
position: relative; 
width: 3px; 
height: 3px; 
overflow: hidden; 
3} 


5. Position size 
The illusion is created using the navigation’s first child 
element as a box that’s sized and positioned to be 
partially visible. Percentage-based measurement is used 
for co-ordinates and sizing to guarantee this. 
nav > *:first-child{ 
position: absolute; 
top: -80%; 
left: -30%; 
width: 160%; 
height: 160%; 
ay 


6. Presentation 
The box is only required for its border outline, hence 
using a transparent background and slim solid border. 
The illusion of the wavy line is made from the box having 
curved edges using the border radius. A slightly 
off-centre origin is applied in order for a ‘wonky’ spin 
animation to be applied. 
nav > *:first-child{ 
background: transparent; 
border: 1px solid rgba(255, 255,255, .5); 
border-radius: 30%; 


We dare 


transform-origin: 50% 45%; 
animation: spin 5s infinite linear; 


i 


7. Top-left corner 
The second span that contains the text content is 
required to be positioned in the top-left corner of its 
parent nav - above the previously defined box element. 
This step also defines other properties for text elements 
to inherit such as the font size and text alignment. 

nav > *:last-child{ 

position: absolute; 


left: Q; 
top: Q; 
width: 100%; 
z-index: 1; 


text-align: center; 
color: #fff; 
font-size: 2em; 


} 


8. Navigation links 
With this example being to display a menu, this step 
specifically sets link items inside the second/last child of 
the navigation to be displayed as a block element. This 
sets each link to appear on a new line, along witha 
margin applied for spacing and colour set to white. 
nav > *:last-child af{ 
display: block; 
text-decoration: none; 


color: #fff; 
margin-top: .5em; 
3 
9. Spin animation 


The spin animation referred to in step 6 is made from 
two frames that result in backwards rotation from 360 
degrees. An illusion of a wavy line is presented when this 
animation is applied to the partially visible box with 
off-centred origin. 
@keyframes spin { 
from{ transform: rotate(36@deg); } 
to { transform: rotate(@deg); } 


We are Decathlon U 
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Get yourself 23 tips to ensure that your mobile designs 


are the very best they can be 


Progressive Web Apps (PWAs) are part of 
the current DNA for the mobile, web and 
desktop app space. Any website can now 
be an installable offline-capable app 
thanks to new technologies and APIs. 
They even offer similar experiences to 
native apps once installed. To provide 
the best possible experience, designers 
need to make an effort to provide a fast 
and mobile-optimised user experience, 
helping the user to navigate, install and 
use their apps. With app store 


distribution support now available, web 
design professionals need to pay close 
attention to every single detail when 
they offer a web-based progressive app. 
Here's how... 
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Understand 
the reach 
of your PWA 


To create the best possible 
experience, testing your user 
interface in all possible user 
platforms is essential. While a 
PWA will work on every 
browser, to leverage the 
advantages of PWA asa 
standalone, offline-capable 
app, there are a list of 
compatible platforms and 
browsers. On iOS, it will be 
compatible with iPhone, iPod 
touch, and iPad since iOS 11.3 
using just Safari. On Windows 
10, Microsoft Store will publish 
your PWA if Bing crawls it. On 
Chromebooks, they are fully 
installable from Chrome OS 67. 
On Android, the best 
experience comes with 
Chrome, but PWAs can also be 
installed from Samsung 
Internet, Firefox, Edge, Opera 
and UC. On features phones, 
KaiOS supports PWAs from an 
internal store. Finally, Chrome 
for desktop (Windows, macOS, 


and Linux) will have support for 


installable PWAs soon; they’re 
available to test today by 


enabling the flag ‘Desktop PWA’ 


from chrome://flags. 


Edit profile 


Maximiliano Firtman @ drinks 
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Companies 


Uber | + myer 


Uber's new finance chief is ready 
for the spotlight 


Nelson Chai becomes latest Wall Street inside: 
to head to Silicon Valley : 
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A new 

responsive 
breakpoint: 
Mini mode 


Typical responsive 
breakpoints expect a 
minimum viewport of a 
mobile phone - 320 x 400 
CSS pixels. But with PWAs on 
the desktop, there is a whole 
new dimension of 
breakpoints we need to 
consider. An installed PWA 
uses a resizable window of 
any size, including a tiny 
widget-like size, such as 200 
x 100 CSS pixels. A mini 
mode can be created for this 


original game/conceptvart 
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POWER UP PROGRESSIVE WEB APPS 


Earn free food and Enjoy a birthday Free refill for 
eat 


brewed coffee and 
tea 


Start an order 


* 
Cee rar] 


by tej 
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unique situation, which will 
only render a summary of 
the content and quick actions 
for the user to keep it visible 
all the time. 

Small viewports don’t end 
with desktop PWAs - typical 
KaiOS feature phones 
supporting PWAs, such as 
the latest Nokia 8110, are 
exposing a viewport of 240 x 
228 on a non-touch screen. 
And also, from Apple Watch 
Series 3 with watchOS 5, 
there is a web browser 
available when the user 
clicks on a link, exposing 
small viewports when adding 
the tag ‘<meta 
name="disabled-adaptations” 
content="watch’>’. 
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POWER UP PROGRESSIVE WEB APPS 


Provide 
good PWA 
icons 


A PWA will be recognisable by 
its icon and the short name 
defined in the manifest. On 
today’s platforms, only PNG 
icons are supported. For app 
stores and launch screens, a 
512 x 512 pixel icon is 
mandatory, and a 1024 x 1024 
version is recommended. 
Android uses 48dp transparent 
icons; here the resolution 
defines the actual size. On 
most Android devices, 192 x 
192 (4x density) and 144 x 144 
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(3x density) will be needed. 
Adaptive Icons available from 
Android 8 is a new way to 
create icons using a variety of 
shapes to be used across 
different device models, but 
this format is not yet available 
on PWAs. 

iOS is entirely different as it 
doesn’t support transparent 
icons. The PWA must supply 
square icons with no 
transparency and no rounded 
corners (iOS will round them). 
And the icons must be defined 
through a ‘<link rel="apple- 
touch-icon”>’ element in the 
HTML, and accept the standard 
sizes property. 
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Naturenauts 
Adding Naturenauts. 


tinder.com 


Tinder 
Adding Tinder. 


app.ft.com 


FT 
Adding FT. 


m.uber.com 


Uber 
Adding Uber... 


Manage notifications 


Clear all 


Control 
reload 


gesture 


Some browsers offer a reload 
gesture when the user pulls 
down from the top. You can 
manage the pull-to-refresh 
gesture with the overscroll- 
behaviour style on the body 
element. Using ‘contain’, the 
reload gesture will be disabled 
and using ‘none’ will also 
disable the bounce effect. 


Disable 
user 
selection 


When you design an app-like 
web experience, several 
sections of the UI shouldn't be 
selectable, such as icons, 
sidebars and tab bars. To avoid 
selection of such elements or 


to trigger unwanted selections, 
the PWA can define the CSS 
style with ‘user-select: none’ on 
the elements that are not 
rendering data. 


What does it mean to be a 
naturenaut? 


Dippy's naturenauts is an immersive experience designed to 
help children explore, understand and care about the natural 
world around them. 


Dippy the dinosaur and Fern the fox will guide your child on 
mini adventures in nature. Along the way, they'll discover the 
colourful side of nature, learn about the UK’s native birds, 

flowers and trees - and hear stories from the Jurassic period, 
too. 


Ground rules 


Before your naturenaut heads off on an adventure, have a 
quick chat about the following rules to keep the countryside 
safe and fun for everyone. 


§& Look but don't always touch. Fallen leaves, sticks and 
pine cones are fine to collect. Don't pick up anything that 

__-~ there isn't very much of or is unusual-looking, including 

"mushrooms. 


Ss The natural world is where lots of plants and animals 


When you design an app-like 
web experience, several 
sections of the Ul shouldn’t 
be selectable, such as icons, 

sidebars and tab bars 
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When you need a 
mobile or desktop app 
that typically 
consumes web 
content, PWA is the 
ideal platform; if you 
go native, you will be 
developing an 
expensive browser 


Maximiliano Firtman 
Mobile & web developer, book author 
https://firt.mobi, @firt 


Provide 
navigation 
within Ul 


When a user accesses a PWA in 
standalone mode, there is no 
browser user interface, and some 
platforms, such as iOS, don’t have 
back buttons or gestures to offer 
navigation. Therefore, it’s essential 
to provide all the possible 
navigation of the app within the 


boundaries of the web content. 
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Reactive 
web 
performance 


Responsive Web Design 
typically takes the viewport 
size, if it’s a touch device and if 
the high-contrast mode is 
enabled to change layout, but 
in a dynamic world with so 
many devices and connections, 
we need to provide a consistent 
and pleasant user experience 
across all users no matter what. 
For example, if the user is ina 
bad 3G connection, or with an 
LTE+ connection but with a 
cheap Android Go device with 
low CPU, memory, and GPU, we 
might not want to deliver the 
same content as to a high-end 
device on a good Wi-Fi, even if 
the available viewport size is 
the same. With modern APIs we 
can query client and server- 
side about total memory RAM 
available, current network 
bandwidth and latency, battery 
level and rendering metrics. 
Based on that information, we 
might want to react and apply a 
different layout, image quality 
or amount of content loaded. 


Resources 


i) Your Virtual Devices 
Ani uo 


Android Studio 
https://bit.ly/2NxuSFK 
It includes the SDK that 
let web designers 
emulate PWAs on 
Android devices and 
Chromebooks (additional 

plugin required). —————— = 


70 feature 


Modern 

image 
and animations 
delivery 


One of the first problems with 
images on a PWA is not 
sending the appropriate size 
for that viewport and pixel 
density, thus delivering a 
bigger file that is necessary. 
The app should use ‘<picture>’ 
or the ‘Client Hints’ spec on the 
server to provide responsive 
images. But also using new 


formats and compression . 

algorithms will save bytes and Using new 
rendering times, such as using formats and 
the WebP format (evolving into - 

the EVIF format for the future) compression 
or encoding your JPEG with the algorithms will 
new Guetzli encoder or your save bytes 


PNGs with Zopfli encoder. 
Regarding animations, 
designers should replace GIF 
files with Animated PNGs 
available on Chrome, Firefox 
and Safari, or should use muted 
MP4 video files saving more 
than 90% of data and creating 
a 20x faster experience. While 
some modern browsers will 
accept muted MP4 files in an 
image, a PWA should have a 
fallback using ‘<video muted 
-webkit-plays-inline autoplay>’ 
for the animation. 


PWA Builder 
https://bit.ly/2wwx34V 
It helps convert a 
website into a PWA, and 
it creates packages for 
Google Play, App Store 
and Microsoft Store. Se = 


1 6 : i 
the 
3 
platform's 
abilities 
When creating PWAs authors 
don’t have access to just a 
screen and an input method. 
There is a good range of 
sensors, hardware and native 
apps available for the app to 
interact with and to create a 
better user experience. PWAs 


can access on all platforms to 
the user’s location, 


accelerometer, magnetometer 


(compass), gyroscope, 
orientation events, images 
from the gallery and to 
capture still pictures from the 
camera. Using Progressive 
Enhancement (that’s the ‘P’ in 
PWA) we can also use other 
hardware that might not be 
available on all platforms, 
such as Bluetooth, one-click 
payments, authentication, 


push notifications, VR and AR, 


raw live video from the 
camera, audio output, speech 
recognition and more. On 
PWAs for Windows Store, 
JavaScript has access to any 
native API to integrate with 
the system, such as creating 
custom tiles for the start 
screen and accessing a user’s 
contacts or calendar. 


Use webhint to 
improve your 
website 


WebHint 
https://webhint.io 
A tool that will help 
with PWA’s 
accessibility, speed 
and security checking « 

your code for best 

practices and 

common errors. === SSS = 
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Emulate 
and debug 
your PWA 


Testing the PWA on all the 
possible scenarios is a must-do 
for every web designer, but 
owning all the devices is almost 
impossible. That’s why there are a 
range of tools that will let 
designers emulate and debug 
without a real device. For Mac 
users, Xcode (available in the Mac 
App Store) includes the iOS 
Simulator where PWAs can be 
tested on the whole range of 
iDevices. On every desktop OS, 
Android Studio includes the 
ability to create as many 
instances of devices as we want, 
including combinations of screen 
sizes, factor and OS version. 
However, not every version 
includes Chrome and the Play 
Store to install more browsers, so 
it’s important to check if the 
emulator contains Play Store. As a 
plugin for the Android ecosystem, 
a Chromebook emulator beta is 
available to download so the full 
desktop PWA final experience can 
be tested and debugged there 
without an actual laptop. 


There area 
range of tools 
that will let 
designers 
emulate and 
debug 
without a real 
device 


Web App Manifest 
Generator 
https://bit.ly/2eYETIN 
It will create the 
Manifest file and 
effortlessly take one 
icon and create all the 
necessary versions for 
Android and Windows. et = 
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Launch 
images 


All Android browsers 
compatible with PWAs will 
create a launch screen from 
your manifest’s declarations 
automatically using an icon, 
the background colour and the 
app’s name. But iOS doesn’t 
generate those launch screens 
automatically, and PWAs need 
to set them up manually 
through link elements. That 
image is used on the opening 
animation and also in the 
multitasking mode, with a 


iOS PWA 


white image as default. The 
PNG image has to be precise to 
the size of the actual screen, so 
several files must be served on 
different link elements with the 
right size property, such as 
‘<link rel="apple-touch-startup- 
image” sizes=”750x1334” 


href=””>’ for iPhone 6S, 7 and 8. 


For 7+, 8+ and iPads we also 
need to provide a landscape 
version and define it with a 
media query. If you don’t want 
to offer all the versions 
manually, libraries such as 
AppCompat can help with 
generating them on the fly. 


example 


This PWA has a white status bar 
defined through meta tag, it defines a 


19° 
user 
interface 
tricks 


iPhone and iPad users need 
particular attention when 
designing a PWA to improve 
the user experience. Apple 
doesn’t support the ‘theme- 
color’ property in the manifest, 
but we can specify status bar 
style through a meta tag: 
<meta name="apple-mobile- 
web-app-status-bar-style”> 
accepting ‘black’ or ‘white’ as 
values. Then, when a user taps 
in a clickable area such as a 


link, a highlight box appears 
over the element. That colour 
can be replaced with ‘-webkit- 
tap-highlight-color style 
always’ using a semi- 
transparent colour such as 
rgba(255, O, O, 0.4). Finally, 
every link (including JavaScript 
internal links) in iOS will trigger 
a pop-up with more data about 
it using the long-press gesture, 
unless the designer applies the 
style -webkit-touch-callout: 
none’. Finally, for Safari on 
iPad, we can specify not to 
render the content as a 
fullscreen iPad while in Side or 
Split View (multi-app view) 
using the viewport’s 
declaration ‘shrink-to-fit=no’. 


green tap highlight color and it 
doesn't disable touch callout 


Open 


Add to Reading List é : 
It’s essential to test every feature 


and not to think that if it works in 


Eo 
as Safari, it will work inthe PWA 


Share... 


Cancel 
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Notch 

and 
iPhone X 
Support 


If the PWA wants to take 
advantage of the notch available 
on iPhone X and some Android 
devices such as LG G/, it needs 
some work. By default, the 
designer can’t use that space, 
and bars or just a colour will 
replace it. To use that space the 
viewport tag has to include 
‘viewport-fit=cover’ and then add 
proper padding values to avoid 
rendering content on the 
invisible notch area, rounded 
screen corners or non-clickable 
areas for global gestures. To 
make that padding compatible 
with all devices, CSS constants 
for the safe zone are available, 
such as ‘env(safe-area-inset-top)’ 
for the top padding. Note that 
before iOS 12, the CSS ‘env’ 
function was named ‘constant’, 
so providing both names for 
some time will be necessary. To 
use the full screen and render 
the app from the very top of the 
display on home-screen apps, 
the meta tag ‘apple-mobile-app- 
status-bar-style’ needs to 

use the value ‘black-translucent’. 


env (safe-area-inset-left) 


Safe Area 


env (safe-area-inset-bottom) 
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23 ii: 


capturing 

On Android with Chrome, PWAs 
have enabled a feature known 
as Link Capturing thanks to 
WebAPK, a feature that creates 
an actual Android native 
package when adding the app 
to the home screen. With that 
feature, the scope of the PWA 
defined in the manifest 
becomes essential not just to 
open external links in the 
browser but also because the 
PWA will own that scope within 
the OS. So, let’s say the user 
installs with Chrome on 
Android a PWA from https:// 
mydomain.app/mypwa. After 
it was installed, every link in 
that device pointing to a URL 
will be opened in the PWA 
window and not in the browser. 
So developers must assure that 
the PWA should adequately 
manage every link sent on 
social networks or emails 
within that scope. The feature 
is also available on desktop OSs 
with Chrome under a flag at the 
time of publishing this article. 


env (safe-area-inset-right) 


feature 


5 to 
follow 


PWA List from 
Maxim Salnikov 


https://bit.ly/2PjpBlv 
A list of the most 
important 100 Twitter 
account on PWAs. 


PWA Daily 
@pwadaily 


Curated content and 
articles on Progressive 
Web Apps every day. 


Intent to Ship 
@intenttoship 

A quick way to get 

the latest information 
about new features on 
every browser. 


Chromium 
Developers 


@chromiumdev 

The largest source for 
the latest APIs on 
Chromium-based and 
other browsers. 


MDN Web Docs 


@mozdevnet 

Web Platform 
documentation updates 
published by the main 
browser’s vendors. 
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expressJS 
n eS @ 


Usage: express [options] [dir] 


Options: 


--version 
--ejs 

--pug 

--hbs 

--hogan 

--view <engine> 
--no-view 
--css <engine> 
--git 

--force 

--help 


add 
add 
add 
add 
add 
use 
add 
add 


output the version number 


ejs engine support 

pug engine support 
handlebars engine support 
hogan.js engine support 


expressJS 


view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade) 
static html instead of view engine 
stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css) 


.gitignore 


force on non-empty directory 
output usage information 


1. Generate a workable structure 


Introduce the right working options to get started 


Express.JS prides itself in being 
‘unopinionated’ - ie the framework 
allows the developer to mix and 
match in terms of architectures, 
templating and markup engines. 
Sadly, great power comes with 
great responsibility. 

The Express developer team 
seeks to soften the blow by 
introducing a project generator. It 
comes to your workstation in the 
form of an NPM package, and will 
aid our experiments with the 
following framework: 


The generator also contains 
dozens of project options - the 
figure accompanying this step 
shows the full help output. For 
simplicity’s sake, we will limit 
ourselves to a project based on the 
default settings. Kick off its 
generation process with: 


Warning: the default view engine 
will not be Jade in future releases 


When done, the current working 
directory contains a new folder 
called ‘futuretest’. It is home to our 
test project and must be 
configured using NPM’s package 
download command. At the time 
of writing, the generator includes 
the Jade view generator - the 
project plans to change this in 


the near future, obligating you to 
pass in a parameter selecting the 
view engine intended. 
Alternatively, request the use of 
Pug - it is the official successor of 
the Jade engine: 


Understand the 

application structure 

Now that the project generator has 
done its thing, let us open App,js in 
an editor of choice. Its - much 
abridged - structure presents itself 
as following: 


Express.JS is highly modular. 
App.js serves as an entry point, 
where one or more ‘use()’ 
functions allow the adding of 
components intended to handle 
various requests. Invocations of 
‘setO’ let you adjust parameters in 
the engine - one of which is the 
installation of the Jade view 


engine mentioned in the 
previous step. 

The actual emission of web 
content takes place in the router 
classes. For brevity’s sake, let’s 
limit ourselves to Index.js: 


‘getQ’ is provided with a matcher 
string and an event handler which 
gets invoked whenever a 
corresponding event occurs. In our 
case, the render method of the 
chosen template engine is told to 
return content to the browser of 
the user who logged in. 


When done, enter 
http:// 
localhost:3000/ 
into a browser of 
choice to look at 
the scaffolding 
created by the 
project generator 


Run the web page 

At this point, we are ready to take 
the website for a spin for the first 
time. Return to the terminal 
containing the Express.JS 
installation, and call on NPM start 
with the debug flag set: 


When done, enter http:// 
localhost:3000/ into a browser of 
choice to look at the scaffolding 
created by the project generator. 
When done, press Ctrl+C to close 
the window and return control to 
the command line interpreter - 
keep in mind that this also closes 
the debugging web server. 
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Doesn't match 


Adding a new endpoint 
to an application is 
accomplished by 
adding a new worker 
into the queue 


Doesn't match 


match 


2. It’s all about routing and endpoints 


Sort the right entry points, add new routes and introduce regular expression support 


For the sake of simplicity, let us 
agree that a web application is 
usually made up of a sequence of 
entry points. Express.JS handles 
these via the router class - think of 
it as a repository of methods that 
get called upon in response to an 
incoming request (see above). 

Adding a new endpoint to an 
application is accomplished by 
adding a new worker into the 
queue. Our auto-generated 
example creates two router types, 
each of which is raised using the 
‘require’ method: 


In the next step, ‘app.use’ 
registers the routers and connects 
them to the request strings. Our 
code furthermore adds an error 
handler that gets invoked if a 
non-existing URL is entered into 
the system: 


Create a new route 
Open Users.js, and modify its code 
as below: 


Adding new routes to Express.JS 
is amechanical process. Grab the 
router object of choice, and invoke 
the method corresponding to the 
HTTP verb you seek to handle. 
Next, pass in a string that will be 
added to the ‘offset’ registered 
with ‘app.use’. From that moment 
onward, both http:// 
localhost:3000/users/user1 and 
http://localhost:3000/users/ 
return a valid response. 

Keep in mind that Express.JS is 
not limited to handling ‘GET’ 
resources. ‘post()’, ‘put()’ and 


76 feature 


‘delete()’ handle the traditional 
four HTTP requests, with dozens of 
additional verb methods catering 
to more unusual needs. Finally, 

the ‘req’ object provides access to 
the request header - put it to good 
use when parsing parameters or 
client information. 


Advanced matching 

Adding routes by hand gets 
tedious as program complexity 
grows. Express.JS caters for this 
problem by introducing both 
wildcard and regular expression 
support. For example, look at the 
following declaration which uses a 
regular expression to match 
against various strings containing 
the character sequence dog. 


Abnormal routing 

While handling the four HTTP 
requests ought to be enough for 
anyone (hat tip to Bill Gates), 
Express.JS can also work with 
additional protocols. Express-WS, 
found at https://www.npmjs.com/ 
package/express-ws, is an 
especially tasty candidate for this 


Doesn't match 


section - it extends Express.JS’s 
reach to include WebSocket 
communications. 

Once the plugin is added to the 
main Express.JS project, enabling 
it is accomplished via a ‘require’ 
call. It returns a helper object 
containing all but one method - 
call it to establish a connection 
between the router and the plugin: 


After that, a new method called 
‘ws()’ can be invoked to add new 
routes based on WebSocket 
technology: 


Their prototype differs from 
normal routes due to the presence 
of the ‘ws’ object - it provides 
access to the underlying 
WebSocket instance connected to 
the client responsible for the 
connection. 


Express - Mozilla Firefox 


Express 


c @ 


Express 


Welcome to Express 


localhost:3000 
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3. Integrate databases and templating engines 


Be sure to employ the power of the rich plugin ecosystem 


Being based on Node.JS means 
that the rich plugin ecosystem is at 
your command when working on 
web-based applications. For 
example, accessing SOL and 
NoSQL databases - usually an 
extraordinarily tedious task - can 
be handled using plugins 

provided by the database vendors. 
The actual deployment is as easy 
as installing the needed NPM 
module - if your code is to 

access a Redis database, simply 
add the following: 


Of course, in-memory SQLite is 
also supported: 


Keep in mind that the Node.JS 
integration is not limited to 
database plugins. Adventurous 
developers could go as far as to 
include products like Tessel, 
thereby creating web applications 
which can also interact with 
Internet of Things devices. 


Templating in style 
One area where simple and real 
programs differ is the creation of 


views. While a small example 
project usually uses hand-crafted 
strings, assembling large swaths of 
HTML with a string of connected 
things is highly annoying. 

Template engines provide a neat 
workaround. They permit the 
creation of predefined schema 
files, which can be populated 
programmatically in execution. 

In the case of our example 
program, the views lay in jade 
files. Opening index reveals the 
following structure: 


Expressions enclosed in curly 
brackets act as template fields 
whose values are to be replaced at 
runtime. Index.js invokes render 
with a parameter object, leading to 
the rendering of the start page 
shown in the figure accompanying 
this step: 


Most templating engines can 
also parse arrays when provided 
with an item template. In this case, 
every line of the array is displayed 
with one instance of the DOM 
model - similarities to the list 
display model found in Android 
are purely coincidental. Express.JS 
is not limited to the predefined 


templating engines. Should you 
feel like rolling out your own for 
some reason, simply follow the 
steps outlined at https://expressjs. 
com/en/advanced/developing- 
template-engines.html - in 
principle, you have to override all 
but one function. 


Handle static content 
Express.JS applications tend to 
contain CSS files and pictures. 
Serving these via the Render 
function is inefficient - a smarter 
way would involve sending them 
on their merry way with a 
traditional HTTP request. This can 
be achieved via the ‘express. 
static(’ function, which can mark 
entire folders for export: 


Keep in mind that 
the Node.JS 
integration is not 
limited to 


Modify the event flow database plug-ins 


Finally, allow us to mention the 
term middleware shortly. In 
Express.JS parlance, middleware is 
a set of one or more components 
which integrate themselves into 
the flowchart shown opposite. 
They can, then, be used to modify 
requests as they pass through the 
routing system - when 
implemented correctly, limitless 
functionality can be achieved. 
Furthermore, some ready 
components can be found at 
https://expressjs.com/en/ 
resources/middleware.html - visit 
this site before embarking ona 
large-scale development project. 
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4. How to 
host an 
Express.JS 


app 


Consider the platforms 
where you can host your 
new creation 


Testing Express.JS-based 
applications is easy. Problems 
occur once you want the page 

to become accessible to third 
parties - due to it being generated 
by the Node.JS environment, there 
is no way to get a static image fit 
for FTP deployment to web 
hosting services. 

In theory, there is nothing 
against using a Raspberry Pi, an 
OrangePi, a dedicated server or a 
virtual machine rented from a 
cloud service or a web host 
provider that offers virtual hosting. 
However, renting a full virtual 
machine can burden you with the 
responsibilities of keeping the 


Dynos are smart, lightweight containers built for modern languages and developer productivity 


Free 


CORE PLATFORM FEATURES 


Free 


execution environment and 
operating system up to date. 
If this task is not to your taste, a 
Platform-as-a-Service provider can 
be a more attractive (albeit, in 
most cases, pretty pricey) choice. 
Many developers consider 
Heroku, with its pricing shown in 
the figure accompanying this 
boxout, to be the gold standard for 
all things that are related to 
Node.JS hosting. 
This, however, is a bit unfair in 


*K ee 
Hobt Standard Performance ™ 


$7 a3 


1GB R 


TAL SCALABILITY MIX 


LANGUAGE RUNTIME METRICS 5GB OR 14GB RAM 


AM 


$25 - $500 per dyno/month 
prorated a the second 


truth - Amazon’s 

Elastic Beanstalk, Google’s Cloud 
Platform and Microsoft’s Azure 
all provide similar support for 
remote execution of Node. 
JS-based payloads. In all of these 
systems, the main issue is 
handling - while Azure is known 
for its slow deployments, other 
providers burden developers with 
difficult-to-use back-end services 
of extremely complex 
configuration systems. 


5. Future-proof your applications 


A host of new additions need to be noted 


Express.JS’s development cycle is 
far from smooth: the developers 
are well-known for frequent API 
changes requiring rewrites of 
client code. The switch from 3.x to 
4.x was especially painful, which is 
why the impending release of 5.x 
might leave quite a few of you 
feeling uncomfortable. 

While Express.JS 5.0 brings 
along a few breaking changes, 
their impact is more limited. First 
of all, a set of already-deprecated 
functions is removed for real - if 
code still uses them, upgrading to 
5.x requires maintenance. 

Designers of view engines need 
to check ‘res.render(): rank 
growth in regards to view 
renderers, which has led to some 
synchronous implementations 
slipping through. Version 5 of 


the framework enhances 
performance by enforcing 
asynchronous rendering. 

In addition to that, a set of 
sundry improvements and 
changes documented at https:// 
github.com/expressjs/express/ 
pull/2237 sees the return of some 
extinct features from previous 
versions - furthermore, some 
long-standing bugs will be fixed in 
the new release. 

Finally, be aware that you can 
already try the new version. 
Simply create a copy of your 
source code, grab a terminal and 
enter the following command to 
download an archive’s worth of 
barely tested bleeding-edge 
JavaScript. Be safe. 
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Furthermore, the supported 
version of the Node.JS 
environment differs from provider 
to provider. Of course, a single 
page of Web Designer does not 
have enough space to cover the 
topic in depth. Visit https://mzl. 
la/2BsAAap, https://bit. 
ly/2nSDf3k and https://bit. 
ly/2r61mwgq for some of the issues 
involved. Make sure to look at the 
provider’s documentation to glean 
more best practices. 


Migrating to Express 5 - Mozilla Firefox 


@Xx Migrating to Express 5 x 
Ay D @ https://expressjs.com/en/quide/migratin OB - UY 
Express Ge r Guide AP! eA d 
Moving to Express 5 
Overview 
Express 5.0 is still in the alpha release stage, but here Is a preview of the changes that will be in the release and 


rate your Express 4 app to Express 5. 


at very differe 


rom Express 4: The changes to the API are not as significant as from 3.0 to 4.0 


Although the basic API remains the same, there are still breaking changes; in other words an existing Express 4 


program might not work if you update it to use Express 5 
To install the latest alpha and to preview Express 5, enter the following command in your application root 
directory: 


You can then run 
After addressing t 
methods or properties that are not supported 


Changes in Express 5 


iutomated tests to see what fails, and fix problems according to the updates listed below. 
lures, run your app to see what errors occur. You'll find out right away If the app uses any 


Here Is the list of changes (as of the alpha 2 release ) that will affect you as a user of Express. See the pull 


request for a list of all the planned features. 


Removed methods and properties 
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Node.js 10: 
What's new? 


Maintaining mature products is especially difficult. Take 
a look at tweaks and changes to the latest version 


n de 


HOME ABOUT DOWNLOADS Docs GET INVOLVED SECURITY NEWS FOUNDATION 


Node v10.0.0 (Current) 


by James M Snell, 2018-04-24 


Node.js 10.0.0 is the seventh major Node.js release since the launch of the Node.js Foundation. In October of 2018, it 
will become the next Active Long Term Support branch. 


Partially in celebration of the N-API native addon API graduating from experimental status, this Node.js release also 
comes with a coordinated experimental release of Node-ChakraCore that has full support for N-API and advances the 
Time-Travel innovation with easier getting started using a VSCode extension. 


Feature Highlights for the Node-ChakraCore release include: 


e Full support for N-API 

e Easy getting started with Time-Travel Debugging via a new Visual Studio Code Extension 
e TTD support for generators and async functions 

¢ Support for Inspector protocol 

e Increased stability and other assorted improvements 
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SUBSCRIBE TODAY Go to page 32 to learn more 


ode.js bravely enabled JavaScript go to 
places its creators never intended the 
language to go. Many well-liked features 
seen in new ECMAScript revisions started 
out as features added to Node js — sadly, the standardised 
APIs often were incompatible with the ones thought up 
by the Node js developer team. 

Thus, one of the recurring topics of the Nodejs world 
revolves around reconciling differences between ‘web 
development and ‘node development’ For example, the 
module subsystem of Node js does not work according 
to ECMAScript standards. 

odejs 10 updates the versions of various core 
components used in the product, thereby enabling 
developers to harness speed and security improvements. 
Furthermore, work on HTTP/2 speeds up delivery of 
content in bandwidth- and/or latency-constrained 
scenarios. A change in the native interface will simplify 
the life of Nodejs plugin developers, leading to a more 
vibrant extension ecosystem. 

The highly detailed technical nature of the changes 
makes providing individual examples difficult. Due to that, 
the following tutorial provides short tidbits of information. 


1. Update your environment 

Nodejs can be compiled by hand. However, most Linux 

distros are able to run an automatic installer. The code 

here shows the installation process on Ubuntu 14.04 LTS. 

If your operating system shows up in Fig. 1, find a similar 

process at nodejs.org/en/download/package-manager/. 
tamhan@TAMHAN14:~$ sudo apt-get remove nodejs 
tamhan@TAMHAN14:~$ curl -sL https://deb. 
nodesource.com/setup_10.x | sudo -E bash - 
tamhan@TAMHAN14:~$ sudo apt-get install -y 
nodejs 


2. Sniff out errors... 
Developers have performed string comparisons to find 
errors ever since Nodejs 1.0. Version 9.0 started to shift 
to easier-to-handle constants, however. The code 
accompanying this step is immune to spelling mistakes 
and is resistant to attempts ‘to improve usability by 
reformulating error messages’. 
TAN 
fi foo 
} catch (err) { 
if (err.code === ‘ERR_ASSERTION’) { ... } 
GIGEa ee te 
3 
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itself, the maintainer will report the issue upstream. 


Installing Node.js via package manager 


Note: The packages on this page are maintained and supported by their respective packagers, not the Node.js core 
team. Please report any issues you encounter to the package maintainer. If it turns out your issue is a bug in Node.js 


Android 
@ Arch Linux 
© Debian and Ubuntu based Linux distributions 


Enterprise Linux and Fedora 
e FreeBSD 

Gentoo 

NetBSD 

@ nvm 

© OpenBSD 

openSUSE and SLE 

@ macOS 


SmartOS and illumos 


strings to transmit error states — Node js 10 does not 
break this tradition. Instead, the framework defines a few 
dozen strings, which will serve as a ‘magic constant’ and 
can be returned in the code field of the ‘Error’ object. 


4....and describe them properly 
The introduction of error codes does not deprecate 
traditional error messages. Code based on the presence 
of the ‘message’ field continues to perform just as it did 
— should you need to present a message end users can 
understand, you can trust the field just as you did before. 
const err = new Error(‘The message’); 
console.error(err.message) ; 


5.Speed comes with V8 updates 
Nodejs always used the V8 runtime for JavaScript 
execution. As with most project collaborations, Nodejs 
usually lags behind V8's progress. Node js 10 is based on 
version 6.6 of V8, which brings significant improvements 
in caching and array-handling performance. 


tamhan@TAMHAN14: ~/Desktop/stuff/2018August/FutureNode10/workspace$ cat index.js 


function /* demo */ sayHurz() 


{ 
} 


console. log("Hurz!"); 


console. lLog(sayHurz.toString()); 


tamhan@TAMHAN14: ~/Desktop/stuff/2018August/FutureNode10/workspace$ node index 
function sayHurz() 


{ 


console. log("Hurz!"); 


} 


tamhan@TAMHAN14: ~/Desktop/stuff/2018August/FutureNode10/workspace$ node -v 


v8.11.3 


® Void Linux 
e Solus 
© Windows 
~ Node.js Error Codes #| 
3....understand them... 
Process computer programmers balk at the idea of using ERR_AMBIGUOUS_ARGUMENT # 


ERR_ARG_NOT_ITERABLE # 
An terable argument (hea value that works with For... of loops] was required. but not provided to a Node} APL 


ERR_ASSERTION # 


be triggered whenever Nede|s detects a 
sert module 


ERR_ASYNC_CALLBACK # 


Anattempt 


.2san AsyneHooks callback, 


6. Headless try-catch! 
‘Try-catch’ blocks are the bane of Java programmers: 
finding one marked with a comment instructing to shut 
the compiler up is common. V8 6.6 reduces the burden of 
unwanted ‘try-catches’ by letting developers omit the 
‘exception’ object from the ‘catch’ block. 
try { 
doSomethingThatMightThrow() ; 
} eaten { 
handleException(); } 


7. Improved detail in 

function reflection 

One little-known detail of JavaScript concerns functions: 
they can be considered objects, too. So far, the ‘toStringO’ 
method just returned the method name. In Node js 10, 


Avoid root non- 
root mismatches 


When installing Node.js by hand, make sure that 
the root and normal user account point to the 
same version of the framework! Parity can be 
checked by analysing the version numbers. 
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tamhan@TAMHAN14: ~/Desktop/stuff/2018August/FutureNode10 


function /* demo */ sayHurz() 


{ 


console. log("Hurz!"); 


} 


workspaceS node index 


tamhan@TAMHAN14: ~/Desktop/stuff /2018August/FutureNode10/workspace$ node -v 


v1i0.1.0 


Node.js v10.8.0 Documentation 


Index | Viewonsingle page | Viewas JSON | Viewanotherversiony | © Edit on GitHub 


Table of Contents 
= N-API 
= Usage 
® N-API Version Matrix 
= Basic N-API Data Types 
= napi_status 
= napi_extended_error_info 
12) = napi_value 
® napi_threadsafe_function 
= napi_threadsafe_function_release_mode 
® napi_threadsafe_function_call_mode 


= N-API Memory Management types 


2018-08-01, Version 10.8.0 (Current), @targos 


Notable Changes 
* deps: 
© Upgrade npm to 6.2.0. #21592 
= npm has moved. This release updates various URLs to point to the right places for bugs, sul 
= Fix the regular expression matching in xcoue_emutation in noue-gyp to also handle versil 
multiple-digit major versions which would otherwise break under use of XCode 10. 
= The npm tree has been significantly flattened. Tarball size for the npm package has gone fr 
= Changelogs: 6.2.0-next.0, 6.2.0-next.1, 6.2.0. 


Commits 


* [ 335575e490 ]- benchmark: remove arrays benchmark (Peter Marshall) #21831 

© [62024n651¢ ] - build: create V8 code cache aiter scriptis run (Joyee Cheung) #21567 

* [5accda2290 ] - build: increase macOS minimum supported version (Michaé! Zasso) #21883 
* [Seiceaabaa ] - build: remove redundant Makefile target (Rich Trott) #21915 

 [ 4ta9562er9 | - build: add new benchmark targets (Kenny Yuan) #20905 

* [4c5tc5c7ce ]- build: move to npm ci. where possible (Rich Trott) #21802 

© [eorsas7e3a ] - build,win,v8: allow precompiling objects-inlI.h (Joao Reis) #21772 

* [87edse6a51 ] - (SEMVER-MINOR) deps: upgrade npm to 6.2.0 (Kat Marchan) #21592 


« [ra68415¢F6 |- deps: chemry-pick 8042693 from upstream V8 (Matheus Marchini) #21855 


the program returns the whole first line — as can be 
seen in the figure, the return value even extends to all 
kinds of comment. 
function /* demo */ sayHurz() 
{ 
console. log(“Hurz!”) ; 


3 
console. log(sayHurz. toString()); 


8.Remedy failed updates 
Should your workstation be unable to run the new 
version of Node js, check the package manager 
configuration. Yours truly had to delete the two files 
mentioned in the following code before normal 
program operation could resume: 
tamhan@TAMHAN14: /etc/apt/sources.list.d$ sudo 
rm nodesource. list 
tamhan@TAMHAN14: /etc/apt/sources.list.d$ sudo 
rm nodesource. list.save 


9. ECMAScript modules 


While Nodejs influenced the idea of JavaScript modules, 
the ECMAScript implementation is not compatible with 
Commons. While the --experimental-modules’ flag has 
been around for quite some time, Node js 10 brings along 
a few new features intended to let ECMAScript-based 
modules work in Node environments. 


tamhan@TAMHAN14:~/workspace$ node 
--experimental-modules index 


10. Understand native 

module architecture... 

While JavaScript can do a lot of things, some jobs 
require the use of C++. So far, developers seeking tighter 
integration have usually placed their trust in the V8 API 
— leading to plugin rewriting whenever the version of 
V8 used in Nodejs was changed. 


11. ...and see N-API improvements 
Thankfully, N-API solves this problem by providing a 
new abstraction layer. Any changes made to the 
underlying platform and tooling are no longer exposed 
to developers working on plugins, thereby lowering 
maintenance burdens and, hopefully, making Node js 
upgrades smoother. 


12. Learn about the API 

As far as C APIs go, the N-API is clearly among the 
better-designed ones. As shown in excruciating detail at 
nodejs.org/api/n-api.html, the API comes equipped with 
methods for handling object creation, callbacks and 
more. Furthermore, the header contains a ‘lock’ 
permitting you to disable features not found in older 
versions of the NAPI for compatibility reasons. 


Move Node.js 10 
to the cloud 


Cloud service providers — be 
it Amazon with AWS, Microsoft 
with Azure or Google with its 
Web Services — tend to drag 
their feet when it comes to 
offering updates of Node. 

js. If past performance is an 
indicator, delays of up to one 
year are to be expected until 
the features discussed in this 
tutorial will become available. 
One way around the problem 
involves Babel (babeljs.io). It 
takes all kinds of JavaScript 
code, and outputs a version 
compatible with older versions. 
Some hackers — a hat tip to 
hackernoon.com/so-i-still- 
cant-run-my-node-js-10- 
code-on-aws-lambda-or-can- 
i-d2a9e8bleeec is in order 

— even go as far as to package 
Node.js via Babel, leading 

to a ‘portable’ version of the 
entire interpreter. 


functions-ggailey77? <>» 
Proxies (preview) + 
+ </> 
Webhook + AP! 
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This is the home page for HTTP/2, a major revision 
of the Web's protocol. It is maintained by the IETF 


HTTP Working Group. 


What is HTTP/2? 


Tweets 


rity HTTP/2 


@HTTP 
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Amazon CloudFront now supports HTTP/2! 
aws.amazon.com/about-aws/what 


~~ 


aws Amazon — now Ss... 


HTTP/2 is a replacement for how HTTP is expressed “on the wire.” It is not a ground-up rewrite of the protocol; HTTP methods, status codes and 
semantics are the same, and it should be possible to use the same APIs as HTTP/1.x (possibly with some small additions) to represent the protocol. 


The focus of the protocol is on performance; specifically, end-user perceived latency, network and server resource usage. One major goal is to allow 


the use of a single connection from browsers to a Web site. 


The basis of the work was SPDY, but HTTP/2 has evolved to take the community's input into account, incorporating several improvements in the 


process. 


See our charter for more details of the scope of the work, as well as our Frequently Asked Questions. 


See also HTTP/2 JP, maintained by the Japanese HTTP/2 community. 


#define NAPI_VERSION 3 
#include <node_api.h> 


13. Use ChaCha20 and Poly1305 


Cryptography always was of significant importance on 
the web. Node js 10 updates the underlying version of 
OpenSSL to 11.0, thereby enabling developers to use 
new encryption algorithms, which are expected to be 
more robust. This is especially helpful when seeking 

to implement AEAD-type encryption schemes. 


14. Targeted tracing 
Nodejs 10 emits a set of additional tracing parameters, 
thereby letting developers zero in on performance 
problems. Trace objects can furthermore be enabled and 
disabled at will via the functions shown in the snippet 
accompanying this step — pinpoint accuracy is now 
at every developer's fingertips. 
const trace_events = require(‘trace_events’); 
const tl = trace_events.createTracing({ 
categories: [‘node’, ‘v8’ ] 
De 
const t2 = trace_events.createTracing({ 
categories: [‘node.perf’, ‘node’ ] 
); 
tl.enable(); 
t2.enable(); 
t2.disable(); 


15. Find out more about tracing 
As of this writing, Node js supports a total of eight trace 
types listed at nodejs.org/api/tracing.html#tracing_ 


trace_events. In addition to V8 events, developers can 
also register themselves for bootstrap, ‘async_hook’ and 
file system sync information at the command line or via 
the trace object. 
const trace_events = require(‘trace_events’); 
const tracing = trace_events.createTracing({ 
categories: [‘node.perf’] }); 
tracing.enable(); 


16. HTTP/2 is now official... 


While the API stability indicator in the Node js 


documentation stil 


Make the 
most of HTTP/2 


When HTTP was 
specified, websites 
were, by and large, 
simple affairs. Re- 
establishing a TCP 
connection for each 
resource was a rather 
mimimal overhead 
when taken in context. 
As page complexity 
increased, steps were 
made to eliminate 
protocol inefficiencies. 
This resulted in an 
upgraded HTTP 
protocol called HTTP/2, 
which lets the browser 
and the server recycle 
an already-established 
TCP connection in 

an attempt to reduce 
latency and overhead. 
Further information 
on HTTP/2’s technical 
benefits can be found 
at http2.github.io/ 

— while GitHub hosts 
the page, its contents 
are maintained 

by the IETF and 
contains all kinds of 
valuable information. 


shows HTTP/2 support as being 


experimental, the API can be considered stable. 

const http2 = require(‘http2’); 

const fs = require(‘fs’); 

const server = http2.createSecureServer ({ 
key: fs.readFileSync(‘localhost-privkey. 


pem’), 


cert: fs.readFileSync(‘localhost-cert.pem’ ) 


De 


server.on(‘error’, (err) => console. 


error(err)); 


Node.js 


Trace Events 


comma-separated category names. 
The available categories are: 


* node - An empty placeholder. 


property. 


node -~trace-events-enabled 


* node. bootstrap - Enables capture of Node,js bootstrap milestones. 


* node. perf - Enables capture of Performance AP! measurements. 


* v8 - The V8 events are GC, compiling, and execution related. 


By default the node, node.async_hooks , and v8 categories are enabled. 


Trace Event provides a mechanism to centralize tracing information generated by V8, Nodejs core, and userspace code. 


Tracing can be enabled with the --trace-event-categories command-line flag or by using the trace_events module. The —-trace-event-categories flag accepts a list of 


* node.async_hooks - Enables capture of detailed async_hooks trace data. The async_hooks events havea unique asyncId anda special triggerId triggerAsyncld 


* node. fs. sync - Enables capture of trace data for file system sync methods 


© node. perf.usertiming - Enables capture of only Performance API User Timing measures and marks. 
© node. perf. timerify - Enables capture of only Performance API timerify measurements. 
* node. promises. rejections - Enables capture of trace data tracking the number of unhandled Promise rejections and handled-after-rejections. 


© node. vm. script - Enables capture of trace data for the vm module's runInNewContext(), runInContext() ,and runInThisContext() methods. 


node --trace-event-categories v8,node,node.async_hooks server. js 


Prior versions of Node,js required the use of the —trace-events-enabled flag to enable trace events. This requirementhas been removed. However, the -trace-events- 
enabled flag may still be used and will enable the node, node. async_hooks , and v8 trace event categories by default. 
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ae 
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js release schedule 
Administrators loathe Node. 

js for the often frantic pace 

of development — hardly a 
month goes by without a new 
version of Node. A two-tier 
release schedule mitigates the 
problem: from time to time, a 
current version receives the LTS 
designation. From that moment 
onward, no new features will be 
added during an 18-month time 
frame. Maintenance, instead, 
limits itself to performing 
non-breaking changes. During 
the initial announcement of 
Node.js LTS releases, only 

“bug fixes for stability, security 
updates, possible npm updates, 
documentation updates 

and certain performance 
improvements that can be 
demonstrated to not break 
existing applications” were 
permitted — so far, that rule 

has stood the test of time. 


Oct 2019 


17....but do mind the encryption 
When implementing a Nodejs server which uses HTTP/2, 
do bear in mind that the unencrypted version of the 
protocol is not supported by any web browser as the time 
of writing. Because of this, you should be prepared to deal 
with significant processor overhead when transmitting 
and receiving data in proxyless configurations. 
server.on(‘stream’, (stream, headers) => 
ut 
// stream is a Duplex 
stream. respond({ 


‘content-type’: ‘text/html’, 
“:status’: 200 
5 
stream.end(‘<h1>Hello World</h1>’); 
v3 


server. listen(8443) ; 


18. File system API with promises 
Promises are all the rage in JavaScript. So far, developers 
have usually had to make do without promise-based file 
system APIs — a problem that’s been remedied in Nodejs 
10. While the module ‘fs/promises is still experimental, it 
is already providing a nice alternative to ‘traditional’ file 
system accesses. 

require(‘fs/promises’ ) 


19. More work has been 
done on async hooks 
Nodejs is single-threaded by default. Async hooks 
enable code to keep an eye on asynchronously-executed 
resources in a more comfortable fashion — while the 
API is far from stable, Nodejs 10 provides significant 
improvements over the barely-working implementations 
found in previous versions. 
const async_hooks = require(‘async_hooks’ ); 
const eid = async_hooks.executionAsyncld() ; 
const tid = async_hooks.triggerAsyncld() ; 
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const asyncHook = 
{ 
init, before, after, destroy, promiseResolve 


De 
20. Turbo-NPM 


While NPM is usually seen as constitutent part of the 
Nodejs distribution, it is actually a standalone product. 
Current versions of Nodejs 10 come with NPM 6 (npmijs. 
com/), which offers significant speed increases when 


async_hooks.createHook 


installing and deploying packages. On this writer’s 
machine, some processes saw ten-fold speed increases. 


21. Find out more 

Should you feel like always staying on top of the latest 
developments in Nodejs, head to github.com/nodejs/ 
node/blob/master/doc/changelogs/CHANGELOG VI10. 
md in a browser of your choice. This GitHub page 
provides an intimate level of detail on changes 

in the product. 


Branch: master + 


GB agg 2018-08-15, Version 10.9.0 (Current) 


9 contributors Aes t e258 


2329 lines (2252 sloc) 382 KB 


Node.js 10 ChangeLog 


Current 
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Creative Coding tutorial with Pts.js 


Learpsthe basics and reach for the stars 


DOWNLOAD TUTORIAL FILES 
www-filesilo.co.uk/webdesigner 


irst impressions matter a great deal, as it 
turns out. Within split seconds, people 
make snap judgments and form opinions 
on anything or anyone, and websites are no 
different. By spending a short time in your website, 
visitors are able to determine whether to continue 
browsing further or leave entirely. Consequently, 
enhancing the visual appeal of landing pages has 
received significant attention over the past few years. 
Companies acknowledge the importance of captivating 
visitors visually, and as such, seek to make their webpages 
unique and memorable. However, this puts pressure on 
front-end designers to keep learning new tricks to ensure 
their web projects not only deliver, but also offer a unique 
visual appeal. A modern JavaScript library that holds 
immense potential in meeting this need is Ptsjs. The 
library, written in TypeScript and compiled to JavaScript 
ESG, is lightweight and modular and ships with many 
useful algorithms for data visualisation and creative 
coding. The library pushes the concepts of geometry to 
unimaginable heights and enables you to compose and 
express what you see in your mind’s eyes — points as 
ideas, shapes, colours, motions, interactions and more. In 
this tutorial, the basics of the library are introduced and a 
practical application of the library demonstrated by 
creating a landing page. 


1. Getting started 

Begin by creating a folder, ‘pts’ on your desktop to store 
the tutorial files. Create two additional folders within it: 
‘css’ to store the styling files, and ‘js’ to store JavaScript 
files. HTML files will be stored in the root folder (‘pts’). 
Create a file ‘styles.css’ in the CSS folder and ‘index,s’ in 
the js folder. These will be used later in the tutorial. 


2. Creating the landing page 
structure 
Open your code editor and create an ‘index.html’ 
document to contain mark up for the main web page. 
Begin by creating the basic structure and give a suitable 
title to the page. 

<html> 

<head> 
<title>Get Creative with PtsJs </ 
title> 
</head> 
<body> </body> 
</html> 


3. Adding content to the 
landing page 
The focus of the tutorial is to create a landing page and 
add captivating visual effects with the Ptsjjs library. As 
such, the landing page's content is added first. To do this, 
create a div in the body section to contain the header. 
Add the header title and its description within it. 
<body> 
<div class=”"header”> 
<h2>Creative Coding tutorial 
with Pts. js</h2> 
<p>Learn the basics and 
reach for the stars</p> 
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</div> 
</body> 


STYLING THE WEB PAGE 
4. Styling the landing page 


Open ‘styles.css’ we created earlier. Begin by setting the 
margin and padding to O for the body. This ensures the 
design remains consistent throughout the page. Next, 
add an overflow with the hidden parameter. This cuts off 
any content that breaks out of its bounds. 
body { 
margin:Q; 
overflow: hidden; 
padding: @; 
3 
Next, style the header and the descriptive paragraph. By 
using absolute positioning, centralise the header at the 
centre of the page. 
.header{ 
text-align: center; 
position: absolute; 
top: 40%; 
left: 20%; 
right : 20%; 
font-family: Trebuchet MS, Arial, 
Helvetica, sans-serif; 
font-size: 25px; 
color: #@bf5f5; 
iy 
-header p { 
font-size: 2Qpx; 
color: #c67508; 
3 


5. Linking the CSS file 

Next, link the CSS stylesheet to the HTML document. The 
styles centralise the heading and its descriptions at the 
centre of the webpage. Create a link to this file in your 


HTML document by adding the following code in the 
head section. 

<link rel="stylesheet” href=”css/styles.css” > 
Currently, the landing page is very basic as it only contains 
coloured text on a white background. 


ADDING JAVASCRIPT 
FUNCTIONALITY 


6. Preparing to add 
JavaScript files 
In index.html’ create a new div where JavaScript will run 
below the header div in the body of the HTML document. 
<div id=”’pt”></div> 
Next, link the library to your project by either 
downloading the file from GitHub (https://github.com/ 
williamngan/pts) or directly linking it from a CDN source 
such as ‘unpkg' or jsdelivr. In the former's case, save the 
ile in the ‘js’ file created in step 1 and link the file as follows: 
<script type=”text/javascript” src=”"path/to/ 
my_script.js”></script> 
nthe latter’s case, simply add the link code below in the 
head section. 
<script src="https://unpkg.com/pts/dist/pts. 
min. js”></script> 
Finally, link the ‘index|s' file created earlier, by adding the 
code below in the body section. 
<script src=”js/index.js”></script> 


Exploring Pts.js 
example projects 


The resource https://ptsjs.org/demo contains 
diverse examples of projects created using the 


library. The page is structured in a way that 
allows viewers to access the source code used in 
developing the different projects. Head onto the 
page to interact with the various projects to 
learn different uses the library can be put into. 
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Tutorials 


Get creative with Ptsjs library 


Creative Coding tutorial with Pts. js 


7. Adding Pts to the global scope 
Open ‘indexjs’ and begin by declaring the Pts library in 
the global scope by using the ‘Pts.quickStart 0’ function. 
By using this function, the need to call ‘Pts. namespace’ 
again is eliminated. Copy the code below. 
Pts.quickStart(“#pt”, “#1e2f40”); 
Note that the div created in step 6 and the background 
colour are passed as parameters in order to target it 
directly and apply the given colour. The page should 
render as follows. 


8. Declare the animation variable 
The animation effect being created using the Pts library in 
his tutorial involves the collision of particles with one 
another in space. A viewer is able to move their cursor 
near the particles and hit them like billiard balls. As such, 
o control this behaviour, a variable is created to allow 
such manipulation. Declare this variable within the 
ollowing function. 

var world; 


o observable changes are noted in the rendered 
webpage as functionality is yet to be added. 


9.Understanding how the 
animation works 

At this point it’s important to understand the analogy Pts 
is built upon. Space provides the paper, Form provides 
the pencil and Point provides the idea. Currently, space 
has been created and its background properties 


Understanding the 
reasoning behind Pts 


The main idea behind the Pts JavaScript library is 


founded on three abstract concepts: Space, Form 
and Point. The resource https://medium.com/@ 
williamngan/pt-93382bf5943e expounds further 
on the analogy behind its inception and introduces 
numerous possibilities in expressing ideas. 
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specified. The add function, with four callback functions: 

‘start ()’ ‘animate ()’ ‘action ()’ and ‘resize ()’ is used to add 

players to the space, thereby giving it form and allowing 

the creation of points. These take the form below: 
space.add ({ 


start: (bound, space) => { 
// code for init 

3, 

animate: (time, ftime, space) => { 
// code for animation 

3, 

action: (type, x, y, event) => { 
// code for interaction 

}, 

resize: (size, event) => { 
// code for resize 

y 28 


10. Setting up ‘start ()’ function 
In initialising the animation, the ‘start ()’ function is 
declared. It takes two parameters: bound, which returns 
the bounding box, and space which returns its space. 
Carefully copy the code below to create the scene with 
30 particles. 
space.add ({ 

start: (bound, space) => { 

// Create the scene and 3@ random 
points 

scene = new Scene (space. innerBound, 
il, ye 

let pts = Create. 
distributeRandom(space.innerBound, 3); 


The first line of code utilises the method ‘space. 
innerBound' to specify that the scene is being created in 
the inner bounding box of the space. ‘distributeRandom’ 
creates a set of 30 random points inside the boundary. 
Do not render the page yet. 


11. Animating the 
random particles 
Next, animate the particles in a random impulse 
movement in order to hit them. The ‘for and ‘Math. 
random’ functions are utilised in randomising the 
movement of the particles. 
// Create particles and hit them with a random 
impulse 
for (let i=@, len=pts.length; i<len; 
sms) 
let p = new Particle (pts[i] 
).size( (i===0) ? 30: 3+Math.random() * space. 
size.x/50 ); 
p.hit (Num. 
randomRange(-50,50), Num.randomRange(-25, 
25)); 
scene.add (p); 
3 
Finally, the created particles are locked so that they can 
be moved ata later point by using the cursor movement. 
world.particle( @ ).lock = true; 
Do not render the page just yet as the function is 
currently incomplete. 


12. Specify the animation timeline 
Having already created the random particles and 
specified their random movements, call the ‘animate’ 
function in order to specify the timeline behaviour of the 
animation. Copy the code below. 


animate: (time, ftime) => { 
world.drawParticles( (p, i) => { 
let color = (i===0) ? 
“#1e2F40” : [“#FF2d5d”, “#42dc8e”, “#2e43eb”, 


“#FFe359” ][i%4]; 
form. fillOnly( color 
).point( p, p.radius, “circle” ) 
); 
world.update ( ftime ); 
}, 
The code has two parameters: time, which gives the 
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Basic overview of 
creating with Pts library 
Interaction with tons of example 
projects shared on the demo page 
https://ptsjs.org/demo reveals 

a similarity in the flow of logic 

in their development. As such, it 

is important to understand this 
logical flow before creating any 
project. In essence, only three 

key steps are involved. First, 

begin by declaring the Pts library 
in the global scope by using the 
‘Pts.quickStart ()’ function. Pass 
the background colour and the 
targeted HTML element where the 
functionality is anticipated to be 
developed. This provides flexibility 
in creating with the library. Second, 
declare animation variables and 
add players to the space. This is 
the aspect that differentiates the 
different projects through the 
application of different maths 
logic. Finally, play the animation 
and decide whether it should 
respond to user activity. 


FINALISING THE ANIMATION 


14. Play the animation 
Currently, the animation is complete. However, no 
activity can be observed because the functions to play 
the animation have not been called yet. Call the ‘play ()' 
function as below. 

space.play(); 
Refresh the page to observe the animation in play. 
Particles are now moving in random motion. 


Learn the basics and reach for the stars 


15. Making the animation 
sensitive to user activity 

Despite the animation being complete, it is however not 
sensitive to user actions. Try moving the cursor on one of 
the particles. Note that no response activity takes place. 
To add this functionality, call the ‘bindMouse’ and 
‘bindTouch’ functions in order to bind all touch or mouse 


events in the canvas element. 


current running time, and ‘ftime’, which gives the time 
taken to draw the previous frame. The specific colours of 
the particles are also randomised and the shape specified 
to be circular. 


13. Respond to user activity 
With the colour properties of the animation specified, call & 
the action function to detect user activity. It includes four 
parameters. Type is a string that returns the action’s 
name Cup’ ‘down’, ‘move; ‘drag’ ‘drop’ ‘over’ and ‘out’). x 
and y returns the position at which the action happened, 
and event returns the actual event object. However, the 
event parameter is not declared in this tutorial. hd @ 
action:( type, px, py) => { 
if (type == “move”) { 
world.particle ( @ ).position = new 
Pt(px, py); 
I 


Learn the basics and roo fag@igpe stars 
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space. bindMouse() .bindTouch() ; 
Refresh the page to observe the added interaction. 
Particles are moving in response to mouse actions and 
the cursor can be used to hit some balls against others. 


TWEAKING THE ANIMATION 


16. Tweaking particle number 
Now that the entire animation is complete, tweak some 
features such as the number and colour of particles. To 
do this, edit the ‘animate ()’ function specified in step 12. 
Set the particle number to 80. Render should appear as 
shown on page 89. 


17. Tweaking particle colour 

Next, tweak the particle colours. Edit the specified colours 
in the ‘animate ()’ function specified in step 12. If these 
colours are specified in the parentheses: #fff, #e9TIf2’, 
‘#f00" #15b6fd’ the page should render as shown. 

Note the key differences between the two. 


EXPLORING THE 
PTS LIBRARY IN DETAIL 


18. Interacting with studies 

The demo page https://ptsjs.org/demo and the studies 
page https://ptsjs.org/study essentially describe similar 
projects. However, with the former, the projects are more 
‘polished’, whereby the underlying functionality is 
abstracted. With the latter, the abstraction is removed and 
interaction between the different points is shown. 

Explore the different studies if interested in exploring the 
limits of the library. Here is a simple example 
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differentiating the two with the 
‘Circle.Intersect2D' functionality. 


19. Interacting 

with docs 

The documentation page 
https://ptsjs.org/docs provides 
detailed TypeScriptJavaScript 
API documentation of Ptsjs. 
Though it is intended for 
advanced users, browse the 
resource to make any necessary 
references to functions utilised in 
different projects. 
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Featured host: Netcetera 


netcetera.co.uk 
03330 439780 


About us 


Formed in 1996, Netcetera is one of 
Europe’s leading web hosting service 
providers, with customers in over 75 
countries worldwide. 

As the premier provider of 
data centre colocation, cloud hosting, 
dedicated servers and managed web 
hosting services in the UK, Netcetera 
offers an array of services designed to 
more effectively manage IT 


What we offer 

« Managed hosting - A full 
range of solutions for a cost- 
effective, reliable, secure host. 


- Cloud hosting - Linux, 
Windows, Hybrid and Private 
Cloud Solutions with support 
and scalability features. 


5 tips from the pros 

1. Reliability, trust & support 
Reliability is a major factor when it 
comes to choosing a hosting partner. 
Netcetera guarantees 100 per cent 
uptime, multiple internet routes with 
the ability to handle DDOS attacks, 
ensuring your site doesn't go down 
when you need it. 


2. Secure and dependable 
etcetera prides itself on offering its 
clients a secure environment. 

t is accredited with ISO 27001 for 
security along with the options of 
configurable secure rackspace available 
in various configurations. 


3. 24/7 technical support 


etcetera has a committed team of 


infrastructures. A state-of-the-art data 
centre environment enables Netcetera 
to offer your business enterprise-level 
colocation and hosted solutions. 
Providing an unmatched value for your 
budget is the driving force behind our 
customer and managed infrastructure 
services. From single server to fully 
customised data centre suites, we focus 
onthe IT solutions you need. 


- Data centre colocation - 
Single server through to full 
racks with FREE setup and a 
generous bandwidth. 


- Dedicated servers - From 
QuadCore up to Smart Servers 
with quick setup and 
fully customisable. 


knowledgeable staff available 24/7 to 
provide you with assistance when you 
need it most. Our people make sure 
you are happy and your problems are 
resolved as quickly as possible. 


4. Value for money 

We do not claim to be the cheapest 
service available, but we do claim to 
offer excellent value for money. We also 
provide a price match on a like-for-like 
basis, as well as a price guarantee for 
your length of service. 


5. Eco-friendly 

Netcetera’s environmental commitment 
is backed by use of eco-cooling and 
hydroelectric power. This makes 
Netcetera one of the greenest data 
centres in Europe. 
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66 Premier provider of 

data centre colocation, cloud 
hosting, dedicated servers 
and managed web hosting 
services in the UK 99 


One of the greenest and mast efficient 


Netcetera Hosting 


Testimonials 
RoyT 


Datacentres'in' the UK 
#ZeroCatbonDatacentre 


Learn More Browse Racks 


Our Services 


“have always had great service from Netcetera. Their technical support is 
” 
second to none. My issues have always been resolved very quickly. 


Suzy B 


“e 
We have several servers from Netcetera and their network connectivity is 


top-notch, with great uptim 


knowledgeable and quick in replying. We would high 


Steve B 


“We put several racks into 


etcetera, basically a comp! 


e and speed is never an issue. Tech support is 


ly recommend Netcetera.” 


lete corporate backend. 


They could not have been more professional, helpful, responsive or friendly. All 
the team were an absolute pleasure to deal with, and ni 


trouble, so they matched ou 


requirements 100 per ce 


jothing was too much 
” 
nt. 


Supreme hosting 


OCWCS irre Siero 
MANAGED HOSTING 

cwcs.co.uk 

08001777000 

CWCS Managed Hosting is the UK’s 
leading hosting specialist. They offer a 
fully comprehensive range of hosting 
products, services and support. Their 
highly trained staff are not only hosting 
experts, they're also committed to 
delivering a great customer experience 
and are passionate about what they do. 


« Colocation hosting 
- VPS 
- 100 per cent network uptime 


UK-based hosting 


<ée CYBERHOST 


cyberhostpro.com 

0845 5279 345 

Cyber Host Pro are committed to 
providing the best cloud server 
hosting in the UK; they are obsessed 
with automation. If you're looking for a 
hosting provider who will provide you 
with the quality you need to help your 
business grow, then look no further 
than Cyber Host Pro. 


- Cloud VPS servers 
- Reseller hosting 
- Dedicated servers 


Cluster web hosting 
fasthosts 


fasthosts.couk 

0808 1686777 

UK-based and operating 24/7 from 
dedicated UK data centres. Fasthosts 
keep over one million domains running 
smoothly and safely each day. Services 
can be self-managed through the 
Fasthosts Control Panel. 


- Dedicated servers 
- Cloud servers 
- Hosted email 


Budget hosting 


HETZNER 


ONLINE 


hetzner.com 

+49 (0)9831505-0 

Hetzner Online is a professional web 
hosting provider and experienced data 
centre operator. Since 1997, the company 
has provided private and business clients 


All-inclusive hosting 


land1.co.uk 

0333 3365509 

1&1 Internet is a leading hosting 
provider that enables businesses, 
developers and IT pros to succeed 
online. Established in 1988, 1&1 now 


with high-performance hosting products 
as well as the infrastructure for the 
efficient operation of sites. A combination 
of stable technology, attractive pricing, 
flexible support and services has enabled 
Hetzner Online to strengthen its market 
position nationally and internationally. 


- Dedicated/shared hosting 
- Colocation racks 
- SSL certificates 


operates across ten countries. With a 
comprehensive range of high- 
performance and affordable products, 1&1 
offers everything from simple domain 
registration to award-winning website 
building tools, eCommerce packages and 
powerful cloud servers. 


- Easy domain registration 
- Professional eShops 
- High-performance servers 


SSD web hosting 


<b> bargainhost 


bargainhost.co.uk 

0843 289 2681 

Since 2001, Bargain Host have 
campaigned to offer the lowest possible 
priced hosting in the UK. They have 
achieved this goal successfully and built 
up a large client database, which includes 
many repeat customers. They have also 
won several awards for providing an 
outstanding hosting service. 


- Shared hosting 
- Cloud servers 
- Domain names 


Value Linux hosting 


PATCHMAN 
WEB HOSTING 


patchman-hosting.co.uk 
01642 424 237 

Linux hosting is a great solution for 
home users, business users and web 
designers looking for cost-effective and 
powerful hosting. Whether you are 
building a single-page portfolio, or you 
are running a database-driven 
eCommerce website, there is a Linux 
hosting solution for you. 


- Student hosting deals 
- Site designer 
« Domain names 


Flexible cloud servers 


elastichosts 


elastichosts.co.uk 

020 7183 8250 

ElasticHosts offer simple, flexible and 
cost-effective cloud services with 
high performance, availability and 
scalability for businesses worldwide. 
Their team of engineers provide 
excellent support 24/7 over the phone, 
by email and with a ticketing system. 


- Cloud servers with any OS 
« Linux OS containers 
- 24/7 expert support 
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Get your listing in our directory 


To advertise here contact Chris 


chris.mitchell@futurenet.com 
+44 (0)1225 687832 
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Featured: 


ORTH Northcoders 
Cc O D = Ie S Tie ees 


Facebook: Northcoders 


66 No matter what your 
background, you can 
fast-track your career and 


Northcoders is the coding bootcamp full-time bootcamp, or fit their course 


for the north, based in the heart of around your life with their 24-week 

Manchester and built upon northern part-time bootcamp. Their internal become a web or software 
values of grit, determination and career support team will help find you s 

community spirit. No matter what work as a developer, setting up developer ‘igi 12 weeks 99 
your background, you can fast-track interviews with your choices of 

your career and become a web or Northcoders Hiring Partners across 


software developer in 12 weeks at their the north of England. 


¢ Full-time: ¢ Part-time: 
Fast-track your career Fit our curriculum around 
in just 12 weeks. yout life in 24 weeks. 


Become a software 


developer in just 
12 weeks 


1. Get started with coding for you, set aside a few evenings 
The best way to know if coding = each week to really start making 


iS for you is to just try it! We progress! If coding is for you, 
recommend the free, online this should be fun. 
JavaScript track of 
Codecademy to get you 4. Be prepared 
started with the basics. We'll be with you every step of 
the way when you apply. Make sade api esata 
2. Do your research sure you go through all the 
Make sure you read plenty materials we recommend and 
of student reviews to make ask for help if you're stuck. 
sure you're applying 
somewhere reputable. Read 5. Get social 
their blog and have a look at With Northcoders, youre not 
their social channels. just on a course, youre part of a 
community that will stay with 2 
3. Throw yourself in you long after you graduate. 7 ae 2 


Once you've decided it’s right Make the most of it! 


Northcoders delivered their part of the bargain in spades. 
They provided tremendous assistance in turning me into 
the full product - a well-rounded, capable, future tech 
employee - and they have the contacts to deliver the 
opportunities for such people. 

Joe Mulvey 

Maths teacher to software developer at Auto Trader 


Becoming part of this vibrant, caring community was 
something | hadn’t expected before the course, but 
now | couldn't be without it. To be a Northcoder is to 
be enlightened, inspired and supported. 

Joanne Imlay 

Primary school teacher to software developer at Careicon 
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U d emy WEGOT CODERS 


‘2 WE GOT CODERS 


UDEMY 

udemy.com wegotcoders.com 
hello@wegotcoders.com 

Twitter:@udemy We Got Coders is a consultancy that 

Facebook: udemy provides experts in agile web 


development, working with startups, 
The inspiration for Udemy began ina . = 3 gua en eae eT bay agencies and government. Take one of 
small village in Turkey, where founder avee @ - B NGS LEAR N their 12-week training courses that covers 
Eren Bali grew up frustrated by the —a° MIN all that is required to become a web 


Get your learning lineup ready. 


limitations of being taught in a : bibhviep tc oaks developer, with highly marketable 


one-room school house. Realising 

the potential of learning on the internet, 
he set out to make quality education 
more accessible. Udemy is now a 
global marketplace for learning and 
teaching online. Students can master 
new skills by choosing from an 
extensive library of over 40,000 
courses including HTML, CSS, UX, 
JavaScript and web development. 


40,000+ courses: There is a 
course for every designer and dev. 
Self-paced learning: Learn how 
to code at your own pace. 


= THE 
IRON YARD 


theironyard.com 


Twitter: @ThelronYard 
Facebook: ThelronYard 


The Iron Yard is one of the world’s 
largest and fastest-growing in-person E r 4 
code schools. It offers full-time and Wee ad 
part-time programs in backend Opie : 
engineering, frontend engineering, ‘ 
mobile engineering and design. The 
lron Yard exists to create real, lasting 
ange for people, their companies 
and communities through technology 
ucation. The in-person, immersive 
format of The Iron Yard's 12-week 
courses helps people learn to code 
and be prepared with the skills needed 
to start a career as junior-level 
software developers. 


12-week code school: Learn 
the latest skills from industry pros. 
Free crash courses: One-night 
courses, the perfect way to learn. 


full-stack web development skills. 


- Classroom-based training 
« Real-world work experience 
- Employment opportunities 


FUTURELEARN 


Future 
Learn 


futurelearn.com 
feedback@futurelearn.com 
Choose from hundreds of free online 
courses, from Language & Culture to 
Business & Management; Science & 
Technology to Health & Psychology. 
Learn from the experts. Meet educators 
from top universities who'll share their 
experience through videos, articles, 
quizzes and discussions. 


- Learn from experts 
- Free courses 
- All-device access 


GYMNASIUM 


GYMNASIUM 


thegymnasium.com 
help@thegymnasium.com 
Gymnasium offers free online courses, 
designed to teach creative 
professionals in-demand skills. 
Courses are all self-paced and taught by 
experienced practitioners with a passion 
for sharing practical lessons from the 
design trenches. 


- Gain real-world skills 


- Get expert instruction 
- Career opportunities 
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Plus, all of this 


Is yours too... 

Get textures, fonts, Learn to code/create with All the assets you'll need | - Al-newtutorial files to help you 

backgrounds and more HTML, CSS & JS to follow our tutorials master this issue's HTML, CSS 
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© access, from anywhere 

Q Free access for every 

© reader, print and digital 

Q Download only the files 
you want, when you want 

Q All your gifts, from all your 

@ issues, in one place 
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PUT A PAUSE 
IN YOUR DAY 


With so many demands from work, home and family, 
there never seem to be enough hours in the day for you. 
Why not press pause once in a while, curl up with your 
favourite magazine and put alittle oasis of ‘you’ in your day. 


OX 


PRESS PAUSE 


ENJOY A MAGAZINE MOMENT 


To find out more about Press Pause, visit; 


pauseyourday.co.uk 
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